From 804e88b7f94de9154679b418a28f791fed92d02d Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Fri, 27 May 2022 12:36:58 -0400
Subject: [PATCH] font preloading logic

---
 lib/styles/fonts/ComicNeue.ts  | 12 ++++++
 lib/styles/fonts/Inter.ts      |  8 +++-
 lib/styles/fonts/RobotoMono.ts |  8 +++-
 lib/styles/stitches.config.ts  |  2 +-
 pages/_document.tsx            | 10 ++---
 pages/previously.tsx           | 74 +++++++++++++++++++++-------------
 6 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/lib/styles/fonts/ComicNeue.ts b/lib/styles/fonts/ComicNeue.ts
index ee53e110..2226a5ae 100644
--- a/lib/styles/fonts/ComicNeue.ts
+++ b/lib/styles/fonts/ComicNeue.ts
@@ -13,6 +13,18 @@ import comicNeueLatin700ItalicWoff2 from "@fontsource/comic-neue/files/comic-neu
 export const name = {
   regular: "Comic Neue",
 };
+export const preloadFonts = [
+  {
+    key: "comic-neue-400",
+    src: comicNeueLatin400NormalWoff2,
+    type: "font/woff2",
+  },
+  {
+    key: "comic-neue-700",
+    src: comicNeueLatin700NormalWoff2,
+    type: "font/woff2",
+  },
+];
 export const family: AtRule.FontFace[] = [
   {
     fontFamily: name.regular,
diff --git a/lib/styles/fonts/Inter.ts b/lib/styles/fonts/Inter.ts
index a7ce4d78..6f2e2b48 100644
--- a/lib/styles/fonts/Inter.ts
+++ b/lib/styles/fonts/Inter.ts
@@ -16,7 +16,13 @@ export const name = {
   variable: "Inter var",
 };
 // re-export hashed URL(s) of the most prominent file so we can preload it in head:
-export const preloadUrls = [interLatinVarFullNormalWoff2];
+export const preloadFonts = [
+  {
+    key: "inter-var",
+    src: interLatinVarFullNormalWoff2,
+    type: "font/woff2",
+  },
+];
 export const family: AtRule.FontFace[] = [
   {
     fontFamily: name.regular,
diff --git a/lib/styles/fonts/RobotoMono.ts b/lib/styles/fonts/RobotoMono.ts
index a308ad8b..2a0c550e 100644
--- a/lib/styles/fonts/RobotoMono.ts
+++ b/lib/styles/fonts/RobotoMono.ts
@@ -23,7 +23,13 @@ export const name = {
   variable: "Roboto Mono var",
 };
 // re-export hashed URL(s) of the most prominent file so we can preload it in head:
-export const preloadUrls = [robotoMonoLatinVarWghtOnlyNormalWoff2];
+export const preloadFonts = [
+  {
+    key: "roboto-mono-var",
+    src: robotoMonoLatinVarWghtOnlyNormalWoff2,
+    type: "font/woff2",
+  },
+];
 export const family: AtRule.FontFace[] = [
   {
     fontFamily: name.regular,
diff --git a/lib/styles/stitches.config.ts b/lib/styles/stitches.config.ts
index 21cef548..feb684cf 100644
--- a/lib/styles/stitches.config.ts
+++ b/lib/styles/stitches.config.ts
@@ -161,4 +161,4 @@ export const globalStyles = globalCss(
 );
 
 // re-export hashed URLs of the most important variable fonts so we can preload them in pages/_document.tsx
-export const preloadUrls = [...Inter.preloadUrls, ...RobotoMono.preloadUrls];
+export const preloadFonts = [...Inter.preloadFonts, ...RobotoMono.preloadFonts];
diff --git a/pages/_document.tsx b/pages/_document.tsx
index f4030f25..da503b5a 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,6 +1,6 @@
 import { Html, Head, Main, NextScript } from "next/document";
 import ThemeScript from "../components/ThemeScript/ThemeScript";
-import { getCssText, preloadUrls } from "../lib/styles/stitches.config";
+import { getCssText, preloadFonts } from "../lib/styles/stitches.config";
 import * as config from "../lib/config";
 
 // https://nextjs.org/docs/advanced-features/custom-document
@@ -12,13 +12,13 @@ const Document = () => {
         <ThemeScript />
 
         {/* preload highest priority fonts defined in ../lib/styles/fonts/ */}
-        {preloadUrls.map((relativeUrl, index) => (
+        {preloadFonts.map((font) => (
           <link
-            key={`font-${index}`}
+            key={`font-${font.key}`}
             rel="preload"
             as="font"
-            type="font/woff2"
-            href={relativeUrl}
+            type={font.type}
+            href={font.src}
             crossOrigin="anonymous"
           />
         ))}
diff --git a/pages/previously.tsx b/pages/previously.tsx
index 2b43d3d5..1f812e8e 100644
--- a/pages/previously.tsx
+++ b/pages/previously.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable camelcase */
 
+import Head from "next/head";
 import { NextSeo } from "next-seo";
 import Layout from "../components/Layout";
 import Content from "../components/Content";
@@ -200,42 +201,57 @@ Previously.getLayout = (page: ReactElement) => {
   })();
 
   return (
-    <Layout
-      css={{
-        fontFamily: '"Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif',
-        fontWeight: 600,
+    <>
+      <Head>
+        {ComicNeue.preloadFonts.map((font) => (
+          <link
+            key={`font-${font.key}`}
+            rel="preload"
+            as="font"
+            type={font.type}
+            href={font.src}
+            crossOrigin="anonymous"
+          />
+        ))}
+      </Head>
 
-        "& em": {
-          fontStyle: "revert !important",
-        },
+      <Layout
+        css={{
+          fontFamily: '"Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif',
+          fontWeight: 600,
 
-        "& header": {
-          // title text
-          "& > nav > a:first-of-type > span:last-of-type": {
-            fontSize: "1.4em",
-            fontWeight: 700,
+          "& em": {
+            fontStyle: "revert !important",
           },
 
-          // menu item text
-          "& > nav > ul > li > a > span": {
+          "& header": {
+            // title text
+            "& > nav > a:first-of-type > span:last-of-type": {
+              fontSize: "1.4em",
+              fontWeight: 700,
+            },
+
+            // menu item text
+            "& > nav > ul > li > a > span": {
+              fontSize: "1.1em",
+              fontWeight: 700,
+              lineHeight: 1.1,
+            },
+          },
+
+          "& main > div > div": {
             fontSize: "1.1em",
-            fontWeight: 700,
-            lineHeight: 1.1,
+            textAlign: "center",
           },
-        },
 
-        "& main > div > div": {
-          fontSize: "1.1em",
-          textAlign: "center",
-        },
-
-        "& footer > div": {
-          fontSize: "0.95em",
-        },
-      }}
-    >
-      {page}
-    </Layout>
+          "& footer > div": {
+            fontSize: "0.95em",
+          },
+        }}
+      >
+        {page}
+      </Layout>
+    </>
   );
 };