clean up next fonts

lib/styles/stitches.config.ts

@@ -6,17 +6,7 @@ import hexToRgba from "./utils/hex-to-rgba";
 import normalizeStyles from "./utils/normalize";
 
 // web fonts
-import { Inter, Roboto_Mono } from "@next/font/google";
-export const inter = Inter({
-  weight: "variable",
-  display: "fallback",
-  preload: true,
-});
-export const robotoMono = Roboto_Mono({
-  weight: "variable",
-  display: "fallback",
-  preload: true,
-});
+import { Inter, RobotoMono } from "./utils/fonts";
 
 // https://stitches.dev/docs/typescript#type-a-css-object
 export type CSS = Stitches.CSS<typeof stitchesConfig>;
@@ -33,8 +23,8 @@ export const {
 } = createStitches({
   theme: {
     fonts: {
-      sans: `${inter.style.fontFamily}, sans-serif`,
-      mono: `${robotoMono.style.fontFamily}, monospace`,
+      sans: `${Inter.style.fontFamily}, sans-serif`,
+      mono: `${RobotoMono.style.fontFamily}, monospace`,
     },
 
     colors: {

lib/styles/utils/fonts.ts

@@ -0,0 +1,30 @@
+import {
+  Inter as InterLoader,
+  Roboto_Mono as RobotoMonoLoader,
+  Comic_Neue as ComicNeueLoader,
+} from "@next/font/google";
+
+// note: subsets are set to 'latin' globally in next.config.js
+// https://beta.nextjs.org/docs/optimizing/fonts#specifying-a-subset
+
+export const Inter = InterLoader({
+  weight: "variable",
+  display: "fallback",
+  preload: true,
+});
+
+export const RobotoMono = RobotoMonoLoader({
+  weight: "variable",
+  display: "fallback",
+  preload: true,
+});
+
+// only for use in pages/previously.tsx (and tree-shaken out everywhere else in production)
+export const ComicNeue = ComicNeueLoader({
+  weight: ["400", "700"],
+  style: ["normal", "italic"],
+  display: "swap",
+  fallback: ["'Comic Sans MS'", "'Comic Sans'"],
+  adjustFontFallback: false,
+  preload: false,
+});