font preloading logic

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,

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,

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,

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