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

@@ -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;

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

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;
+}
+
+// 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%;

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);

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'),
+    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.woff') format('woff');
+         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;

layouts/_default/single.amp.html

@@ -19,50 +19,12 @@
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
     {{ partial "head/open-graph" . }}
 
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&amp;family=Roboto+Mono&amp;display=swap" rel="stylesheet">
+
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <style amp-custom>
-      @font-face {
-        font-family: "Inter";
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        src: url("{{ "vendor/inter/inter-regular-subset.woff2" | absURL }}") format("woff2"),
-             url("{{ "vendor/inter/inter-regular-subset.woff" | absURL }}") format("woff");
-        unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF,
-                       U+2190-21FF, U+2200-22FF, U+2122;
-      }
-      @font-face {
-        font-family: "Inter";
-        font-style: normal;
-        font-weight: 500;
-        font-display: swap;
-        src: url("{{ "vendor/inter/inter-medium-subset.woff2" | absURL }}") format("woff2"),
-             url("{{ "vendor/inter/inter-medium-subset.woff" | absURL }}") format("woff");
-        unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF,
-                       U+2190-21FF, U+2200-22FF, U+2122;
-      }
-      @font-face {
-        font-family: "Inter";
-        font-style: normal;
-        font-weight: 700;
-        font-display: swap;
-        src: url("{{ "vendor/inter/inter-bold-subset.woff2" | absURL }}") format("woff2"),
-             url("{{ "vendor/inter/inter-bold-subset.woff" | absURL }}") format("woff");
-        unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF,
-                       U+2190-21FF, U+2200-22FF, U+2122;
-      }
-      @font-face {
-        font-family: "Hack";
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        src: url("{{ "vendor/hack/hack-regular-subset.woff2" | absURL }}") format("woff2"),
-             url("{{ "vendor/hack/hack-regular-subset.woff" | absURL }}") format("woff");
-      }
-
       body {
         font-family: "Inter", sans-serif;
-        font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
         font-kerning: normal;
         font-variant-ligatures: normal;
         font-size: 0.92em;
@@ -210,15 +172,14 @@
         text-align: right;
       }
       div.highlight, code {
-        font-family: "Hack", monospace;
+        font-family: "Roboto Mono", monospace;
-        font-size: 0.95em;
         letter-spacing: 0;
         page-break-inside: avoid;
         margin: 0 0.1em;
       }
       p code {
         border: 1px solid #dddddd;
-        padding: 0.2em;
+        padding: 0.1em 0.25em;
         background-color: #fbfbfb;
       }
       div.highlight {
@@ -297,7 +258,7 @@
 
     {{ if eq hugo.Environment "production" }}
     <!-- https://docs.simpleanalytics.com/without-javascript -->
-    <amp-pixel src="{{ "api/views/noscript.gif" | absURL }}?ignore-dnt=true&hostname=CANONICAL_HOSTNAME&path=CANONICAL_PATH&referrer=DOCUMENT_REFERRER&https=true&ua=USER_AGENT&width=VIEWPORT_WIDTH&type=pageview" layout="nodisplay"></amp-pixel>
+    <amp-pixel src="{{ "api/views/noscript.gif" | absURL }}?ignore-dnt=true&amp;hostname=CANONICAL_HOSTNAME&amp;path=CANONICAL_PATH&amp;referrer=DOCUMENT_REFERRER&amp;https=true&amp;ua=USER_AGENT&amp;width=VIEWPORT_WIDTH&amp;type=pageview" layout="nodisplay"></amp-pixel>
     {{ end }}
   </body>
 </html>

layouts/partials/head/preload.html

@@ -1,4 +1 @@
-<link rel="preload" href="{{ "vendor/inter/inter-regular-subset.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ "vendor/inter/inter-subset.var.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="{{ "vendor/inter/inter-medium-subset.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="{{ "vendor/inter/inter-bold-subset.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="{{ "vendor/hack/hack-regular-subset.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>