From da1743cf2dd6f7cf91f084d2214a1c874ec083c9 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Wed, 22 Jul 2020 16:19:24 -0400 Subject: [PATCH] add variable Inter fonts current faces/files kept as a fallback. also switched to Google-hosted fonts on AMP pages (might as well...) --- assets/sass/abstracts/_functions.scss | 2 +- assets/sass/abstracts/_settings.scss | 1 + assets/sass/components/_global.scss | 21 ++++++-- assets/sass/components/_typography.scss | 20 +++++++ content/previously/index.md | 6 ++- layouts/_default/single.amp.html | 49 ++---------------- layouts/partials/head/preload.html | 5 +- .../comic-neue/comic-neue-bold-subset.woff | Bin 0 -> 22524 bytes .../comic-neue/comic-neue-bold-subset.woff2 | Bin 0 -> 17968 bytes static/vendor/comic-neue/comic-neue-bold.woff | Bin 30076 -> 0 bytes .../vendor/comic-neue/comic-neue-bold.woff2 | Bin 24016 -> 0 bytes .../comic-neue/comic-neue-regular-subset.woff | Bin 0 -> 23016 bytes .../comic-neue-regular-subset.woff2 | Bin 0 -> 18304 bytes .../vendor/comic-neue/comic-neue-regular.woff | Bin 30916 -> 0 bytes .../comic-neue/comic-neue-regular.woff2 | Bin 24632 -> 0 bytes .../inter/inter-bold-italic-subset.woff | Bin 0 -> 41696 bytes .../inter/inter-bold-italic-subset.woff2 | Bin 0 -> 31700 bytes .../vendor/inter/inter-italic-subset.var.woff | Bin 0 -> 83212 bytes .../inter/inter-italic-subset.var.woff2 | Bin 0 -> 68828 bytes .../inter/inter-medium-italic-subset.woff | Bin 0 -> 41768 bytes .../inter/inter-medium-italic-subset.woff2 | Bin 0 -> 31572 bytes .../inter/inter-regular-italic-subset.woff | Bin 0 -> 40424 bytes .../inter/inter-regular-italic-subset.woff2 | Bin 0 -> 30484 bytes static/vendor/inter/inter-subset.var.woff | Bin 0 -> 76696 bytes static/vendor/inter/inter-subset.var.woff2 | Bin 0 -> 63412 bytes 25 files changed, 49 insertions(+), 55 deletions(-) create mode 100644 static/vendor/comic-neue/comic-neue-bold-subset.woff create mode 100644 static/vendor/comic-neue/comic-neue-bold-subset.woff2 delete mode 100755 static/vendor/comic-neue/comic-neue-bold.woff delete mode 100755 static/vendor/comic-neue/comic-neue-bold.woff2 create mode 100644 static/vendor/comic-neue/comic-neue-regular-subset.woff create mode 100644 static/vendor/comic-neue/comic-neue-regular-subset.woff2 delete mode 100755 static/vendor/comic-neue/comic-neue-regular.woff delete mode 100755 static/vendor/comic-neue/comic-neue-regular.woff2 create mode 100644 static/vendor/inter/inter-bold-italic-subset.woff create mode 100644 static/vendor/inter/inter-bold-italic-subset.woff2 create mode 100644 static/vendor/inter/inter-italic-subset.var.woff create mode 100644 static/vendor/inter/inter-italic-subset.var.woff2 create mode 100644 static/vendor/inter/inter-medium-italic-subset.woff create mode 100644 static/vendor/inter/inter-medium-italic-subset.woff2 create mode 100644 static/vendor/inter/inter-regular-italic-subset.woff create mode 100644 static/vendor/inter/inter-regular-italic-subset.woff2 create mode 100644 static/vendor/inter/inter-subset.var.woff create mode 100644 static/vendor/inter/inter-subset.var.woff2 diff --git a/assets/sass/abstracts/_functions.scss b/assets/sass/abstracts/_functions.scss index c52a4493..adca3eb7 100644 --- a/assets/sass/abstracts/_functions.scss +++ b/assets/sass/abstracts/_functions.scss @@ -16,7 +16,7 @@ @return linear-gradient($color-opaque-alpha, $color-opaque-alpha); } -// Web fonts (see components/_fonts.scss) +// Web fonts (see components/_typography.scss) @mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap) { @font-face { font-family: $family; diff --git a/assets/sass/abstracts/_settings.scss b/assets/sass/abstracts/_settings.scss index 6b054eb7..5ccfec5b 100644 --- a/assets/sass/abstracts/_settings.scss +++ b/assets/sass/abstracts/_settings.scss @@ -2,6 +2,7 @@ // Web fonts $webfont-sans: "Inter", sans-serif; +$webfont-sans-variable: "Inter var"; $webfont-mono: "Hack", monospace; // System fonts diff --git a/assets/sass/components/_global.scss b/assets/sass/components/_global.scss index b9677477..acae8c1c 100644 --- a/assets/sass/components/_global.scss +++ b/assets/sass/components/_global.scss @@ -5,14 +5,26 @@ body { width: 100%; height: 100%; margin: 0 auto; + font-family: $webfont-sans; font-kerning: normal; + font-variant-ligatures: normal; font-feature-settings: "kern", "liga", "calt", "clig", "ss01"; line-height: 1.5; - box-sizing: border-box; +} - // manually setting light/dark mode backgrounds and bulb icon - // really just the color of header & footer +// override above font-family if browser supports variable fonts +// https://caniuse.com/#feat=variable-fonts +// stylelint-disable-next-line plugin/no-unsupported-browser-features +@supports (font-variation-settings: normal) { + body { + font-family: $webfont-sans-variable, $webfont-sans; + } +} + +// manually setting light/dark mode backgrounds and bulb icon +// really just the color of header & footer +body { &.light { background-color: map-get(map-get($themes, "light"), "background-outer"); @@ -49,7 +61,8 @@ div.layout { display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11 } -/*! Credit for cool link underlines: https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/ */ +// cool link underlines: +// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/ a { text-decoration: none; background-position: 0% 100%; diff --git a/assets/sass/components/_typography.scss b/assets/sass/components/_typography.scss index 8f3a5efd..06fb3413 100644 --- a/assets/sass/components/_typography.scss +++ b/assets/sass/components/_typography.scss @@ -12,15 +12,34 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF * Licensed under the SIL Open Font License, Version 1.1: * https://github.com/rsms/inter/blob/v3.13/LICENSE.txt */ + +// Variable +@include font-face("Inter var", "vendor/inter/inter-subset.var", 100 900) { + unicode-range: $unicode-subset; +} +@include font-face("Inter var", "vendor/inter/inter-italic-subset.var", 100 900, italic) { + unicode-range: $unicode-subset; +} + +// Legacy @include font-face("Inter", "vendor/inter/inter-regular-subset", 400) { unicode-range: $unicode-subset; } +@include font-face("Inter", "vendor/inter/inter-regular-italic-subset", 400, italic) { + unicode-range: $unicode-subset; +} @include font-face("Inter", "vendor/inter/inter-medium-subset", 500) { unicode-range: $unicode-subset; } +@include font-face("Inter", "vendor/inter/inter-medium-italic-subset", 500, italic) { + unicode-range: $unicode-subset; +} @include font-face("Inter", "vendor/inter/inter-bold-subset", 700) { unicode-range: $unicode-subset; } +@include font-face("Inter", "vendor/inter/inter-bold-italic-subset", 700, italic) { + unicode-range: $unicode-subset; +} /*! * Hack typeface v3.003 - https://sourcefoundry.org/hack/ @@ -29,5 +48,6 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF * Licensed under the MIT License: * https://github.com/source-foundry/Hack/blob/v3.003/LICENSE.md */ + @include font-face("Hack", "vendor/hack/hack-regular-subset", 400); @include font-face("Hack", "vendor/hack/hack-italic-subset", 400, italic); diff --git a/content/previously/index.md b/content/previously/index.md index c198ab80..9a1e93e8 100644 --- a/content/previously/index.md +++ b/content/previously/index.md @@ -19,11 +19,13 @@ css: | font-style: normal; font-weight: 700; font-display: swap; - src: url('https://jarv.is/vendor/comic-neue/comic-neue-bold.woff2') format('woff2'), - url('https://jarv.is/vendor/comic-neue/comic-neue-bold.woff') format('woff'); + src: url('https://jarv.is/vendor/comic-neue/comic-neue-bold-subset.woff2') format('woff2'), + url('https://jarv.is/vendor/comic-neue/comic-neue-bold-subset.woff') format('woff'); + unicode-range: U+0000-00FF,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2200-22FF,U+2122; } body { font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif; + font-weight: 700; } div#content { text-align: center; diff --git a/layouts/_default/single.amp.html b/layouts/_default/single.amp.html index 8ddb006e..586f0710 100644 --- a/layouts/_default/single.amp.html +++ b/layouts/_default/single.amp.html @@ -19,50 +19,12 @@ {{ partial "head/open-graph" . }} + +