Preload font and switch to a single variable font (google#103)

Preloads fonts to ensure 100 score on LH. Also, it is the right compromise for simplicity. Switches to a variable font such that: - preloading is trivial because there is only a single file for all pages such that preloads don't depend on CSS matching. - and we save A LOT of bytes from not only downloading one slightly bigger fonts instead of 4-6 almost as large files.
hlnb · Sep 11, 2021 · fbf90f3 · fbf90f3
1 parent 6ce62c3
commit fbf90f3
Show file tree

Hide file tree

Showing 41 changed files with 3 additions and 175 deletions.
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -44,6 +44,7 @@
     <link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
 
     <link rel="preconnect" href="/" crossorigin>
+    <link rel="preload" href="/fonts/Inter-3.19.var.woff2" as="font" type="font/woff2" crossorigin>
     <script async defer src="{{ "/js/min.js" | addHash }}"
       {% if webvitals %}data-cwv-src="{{ "/js/web-vitals.js" | addHash }}"{% endif %}>
     </script>

diff --git a/css/main.css b/css/main.css
@@ -212,141 +212,6 @@ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
 
 */
-@font-face {
-  font-family: "Inter UI";
-  font-style: normal;
-  font-weight: 100;
-  src: url("/fonts/Inter-Thin.woff2") format("woff2"),
-    url("/fonts/Inter-Thin.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter UI";
-  font-style: italic;
-  font-weight: 100;
-  src: url("/fonts/Inter-ThinItalic.woff2") format("woff2"),
-    url("/fonts/Inter-ThinItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter UI";
-  font-style: normal;
-  font-weight: 200;
-  src: url("/fonts/Inter-ExtraLight.woff2") format("woff2"),
-    url("/fonts/Inter-ExtraLight.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter UI";
-  font-style: italic;
-  font-weight: 200;
-  src: url("/fonts/Inter-ExtraLightItalic.woff2") format("woff2"),
-    url("/fonts/Inter-ExtraLightItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter UI";
-  font-style: normal;
-  font-weight: 300;
-  src: url("/fonts/Inter-Light.woff2") format("woff2"),
-    url("/fonts/Inter-Light.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter UI";
-  font-style: italic;
-  font-weight: 300;
-  src: url("/fonts/Inter-LightItalic.woff2") format("woff2"),
-    url("/fonts/Inter-LightItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter UI";
-  font-style: normal;
-  font-weight: 400;
-  src: url("/fonts/Inter-Regular.woff2") format("woff2"),
-    url("/fonts/Inter-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter UI";
-  font-style: italic;
-  font-weight: 400;
-  src: url("/fonts/Inter-Italic.woff2") format("woff2"),
-    url("/fonts/Inter-Italic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter UI";
-  font-style: normal;
-  font-weight: 500;
-  src: url("/fonts/Inter-Medium.woff2") format("woff2"),
-    url("/fonts/Inter-Medium.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter UI";
-  font-style: italic;
-  font-weight: 500;
-  src: url("/fonts/Inter-MediumItalic.woff2") format("woff2"),
-    url("/fonts/Inter-MediumItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter UI";
-  font-style: normal;
-  font-weight: 600;
-  src: url("/fonts/Inter-SemiBold.woff2") format("woff2"),
-    url("/fonts/Inter-SemiBold.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter UI";
-  font-style: italic;
-  font-weight: 600;
-  src: url("/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter-SemiBoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter UI";
-  font-style: normal;
-  font-weight: 700;
-  src: url("/fonts/Inter-Bold.woff2") format("woff2"),
-    url("/fonts/Inter-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter UI";
-  font-style: italic;
-  font-weight: 700;
-  src: url("/fonts/Inter-BoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter-BoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter UI";
-  font-style: normal;
-  font-weight: 800;
-  src: url("/fonts/Inter-ExtraBold.woff2") format("woff2"),
-    url("/fonts/Inter-ExtraBold.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter UI";
-  font-style: italic;
-  font-weight: 800;
-  src: url("/fonts/Inter-ExtraBoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter-ExtraBoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter UI";
-  font-style: normal;
-  font-weight: 900;
-  src: url("/fonts/Inter-Black.woff2") format("woff2"),
-    url("/fonts/Inter-Black.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter UI";
-  font-style: italic;
-  font-weight: 900;
-  src: url("/fonts/Inter-BlackItalic.woff2") format("woff2"),
-    url("/fonts/Inter-BlackItalic.woff") format("woff");
-}
-
 /* --------------------------------------------------------------------------
 Single variable font.
 
@@ -360,44 +225,12 @@ html {
     font-family: 'Inter UI var', sans-serif;
   }
 }
-
-BUGS:
-- Safari 12.0 will default to italic instead of regular when font-weight
-  is provided in a @font-face declaration.
-  Workaround: Use "Inter UI var alt" for Safari, or explicitly set
-  `font-variation-settings:"slnt" DEGREE`.
 */
 @font-face {
-  font-family: "Inter UI var";
+  font-family: "Inter UI";
   font-weight: 100 900;
   font-style: oblique 0deg 10deg;
-  src: url("/fonts/Inter.var.woff2") format("woff2");
-}
-
-/* --------------------------------------------------------------------------
-
-"Inter UI var alt" is recommended for Safari and Edge, for reliable italics.
-
-@supports (font-variation-settings: normal) {
-  html {
-    font-family: 'Inter UI var alt', sans-serif;
-  }
-}
-
-*/
-@font-face {
-  font-family: "Inter UI var alt";
-  font-weight: 100 900;
-  font-style: normal;
-  font-named-instance: "Regular";
-  src: url("/fonts/Inter-roman.var.woff2") format("woff2");
-}
-@font-face {
-  font-family: "Inter UI var alt";
-  font-weight: 100 900;
-  font-style: italic;
-  font-named-instance: "Italic";
-  src: url("/fonts/Inter-italic.var.woff2") format("woff2");
+  src: url("/fonts/Inter-3.19.var.woff2") format("woff2");
 }
 
 /*
@@ -855,12 +688,6 @@ html {
   font-family: Inter UI, sans-serif;
   --font-family: Inter UI, sans-serif;
 }
-@supports (font-variation-settings: normal) {
-  html {
-    font-family: Inter UI var alt, sans-serif;
-    --font-family: Inter UI var alt, sans-serif;
-  }
-}
 form {
   padding: 1.5em 1.5em 0;
   border: 0.2rem solid #202020;

diff --git a/fonts/Inter-3.19.var.woff2 b/fonts/Inter-3.19.var.woff2
diff --git a/fonts/Inter-Black.woff b/fonts/Inter-Black.woff
diff --git a/fonts/Inter-Black.woff2 b/fonts/Inter-Black.woff2
diff --git a/fonts/Inter-BlackItalic.woff b/fonts/Inter-BlackItalic.woff
diff --git a/fonts/Inter-BlackItalic.woff2 b/fonts/Inter-BlackItalic.woff2
diff --git a/fonts/Inter-Bold.woff b/fonts/Inter-Bold.woff
diff --git a/fonts/Inter-Bold.woff2 b/fonts/Inter-Bold.woff2
diff --git a/fonts/Inter-BoldItalic.woff b/fonts/Inter-BoldItalic.woff
diff --git a/fonts/Inter-BoldItalic.woff2 b/fonts/Inter-BoldItalic.woff2
diff --git a/fonts/Inter-ExtraBold.woff b/fonts/Inter-ExtraBold.woff
diff --git a/fonts/Inter-ExtraBold.woff2 b/fonts/Inter-ExtraBold.woff2
diff --git a/fonts/Inter-ExtraBoldItalic.woff b/fonts/Inter-ExtraBoldItalic.woff
diff --git a/fonts/Inter-ExtraBoldItalic.woff2 b/fonts/Inter-ExtraBoldItalic.woff2
diff --git a/fonts/Inter-ExtraLight.woff b/fonts/Inter-ExtraLight.woff
diff --git a/fonts/Inter-ExtraLight.woff2 b/fonts/Inter-ExtraLight.woff2
diff --git a/fonts/Inter-ExtraLightItalic.woff b/fonts/Inter-ExtraLightItalic.woff
diff --git a/fonts/Inter-ExtraLightItalic.woff2 b/fonts/Inter-ExtraLightItalic.woff2
diff --git a/fonts/Inter-Italic.woff b/fonts/Inter-Italic.woff
diff --git a/fonts/Inter-Italic.woff2 b/fonts/Inter-Italic.woff2
diff --git a/fonts/Inter-Light.woff b/fonts/Inter-Light.woff
diff --git a/fonts/Inter-Light.woff2 b/fonts/Inter-Light.woff2
diff --git a/fonts/Inter-LightItalic.woff b/fonts/Inter-LightItalic.woff
diff --git a/fonts/Inter-LightItalic.woff2 b/fonts/Inter-LightItalic.woff2
diff --git a/fonts/Inter-Medium.woff b/fonts/Inter-Medium.woff
diff --git a/fonts/Inter-Medium.woff2 b/fonts/Inter-Medium.woff2
diff --git a/fonts/Inter-MediumItalic.woff b/fonts/Inter-MediumItalic.woff
diff --git a/fonts/Inter-MediumItalic.woff2 b/fonts/Inter-MediumItalic.woff2
diff --git a/fonts/Inter-Regular.woff b/fonts/Inter-Regular.woff
diff --git a/fonts/Inter-Regular.woff2 b/fonts/Inter-Regular.woff2
diff --git a/fonts/Inter-SemiBold.woff b/fonts/Inter-SemiBold.woff
diff --git a/fonts/Inter-SemiBold.woff2 b/fonts/Inter-SemiBold.woff2
diff --git a/fonts/Inter-SemiBoldItalic.woff b/fonts/Inter-SemiBoldItalic.woff
diff --git a/fonts/Inter-SemiBoldItalic.woff2 b/fonts/Inter-SemiBoldItalic.woff2
diff --git a/fonts/Inter-Thin.woff b/fonts/Inter-Thin.woff
diff --git a/fonts/Inter-Thin.woff2 b/fonts/Inter-Thin.woff2
diff --git a/fonts/Inter-ThinItalic.woff b/fonts/Inter-ThinItalic.woff
diff --git a/fonts/Inter-ThinItalic.woff2 b/fonts/Inter-ThinItalic.woff2
diff --git a/fonts/Inter-italic.var.woff2 b/fonts/Inter-italic.var.woff2
diff --git a/fonts/Inter-roman.var.woff2 b/fonts/Inter-roman.var.woff2