diff options
Diffstat (limited to 'sass')
| -rw-r--r-- | sass/abridge.scss | 11 | ||||
| -rw-r--r-- | sass/fonts/_Arimo.scss | 17 |
2 files changed, 28 insertions, 0 deletions
diff --git a/sass/abridge.scss b/sass/abridge.scss index 684a71d..c72689c 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -6,6 +6,17 @@ @use "colors-syntax"; /****************************************************************************** + * FONTS - Abridge by default uses the System Font Stack + * https://css-tricks.com/snippets/css/system-font-stack/ + * However if you need you can load a specific font below, + * make sure to have the relevant woff2 fonts in your static/fonts folder + * This is for running the theme directly, if using abridge as a theme + * use the section at the bottom of your root sass/abridge.scss + * I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo + *****************************************************************************/ +//@use "fonts/Roboto"; + +/****************************************************************************** * Variables *****************************************************************************/ diff --git a/sass/fonts/_Arimo.scss b/sass/fonts/_Arimo.scss new file mode 100644 index 0000000..d3dc829 --- /dev/null +++ b/sass/fonts/_Arimo.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Arimo'; + src: local("Arimo"), url("fonts/Arimo.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'Arimo'; + src: local("Arimo-Italic"), url("fonts/Arimo-Italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'Arimo'; + src: local("Arimo-Bold"), url("fonts/Arimo-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} |