refactor font loaders/declarations

lib/helpers/styles.ts

@@ -0,0 +1,14 @@
+import hash from "@emotion/hash";
+
+// a little hacky-hack to have react combine all of these css var declarations into a single <style> tag up top. see:
+// https://react.dev/reference/react-dom/components/style#rendering-an-inline-css-stylesheet
+export const setRootCssVariables = (vars: Record<string, string>) => {
+  const root = Object.entries(vars)
+    .map(([key, value]) => `--${key}:${value}`)
+    .join(";");
+
+  return {
+    href: hash(root),
+    dangerouslySetInnerHTML: { __html: `:root{${root}}` },
+  };
+};

lib/styles/fonts/index.ts

@@ -1,9 +0,0 @@
-// a weird system but makes it impossible to accidentally end up with multiple imports of the same font. see:
-// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#reusing-fonts
-
-// main fonts
-export { default as GeistSans } from "./loaders/GeistSans";
-export { default as GeistMono } from "./loaders/GeistMono";
-
-// one-off fonts
-export { default as ComicNeue } from "./loaders/ComicNeue";

lib/styles/fonts/loaders/ComicNeue.ts

@@ -1,13 +0,0 @@
-import { Comic_Neue as ComicNeueLoader } from "next/font/google";
-
-const ComicNeue = ComicNeueLoader({
-  weight: ["400", "700"],
-  style: ["normal", "italic"],
-  subsets: ["latin"],
-  display: "swap",
-  fallback: ["'Comic Sans MS'", "'Comic Sans'"],
-  adjustFontFallback: false,
-  preload: false,
-});
-
-export default ComicNeue;

lib/styles/fonts/loaders/GeistMono.ts

@@ -1,21 +0,0 @@
-import { Geist_Mono as GeistMonoLoader } from "next/font/google";
-
-const GeistMono = GeistMonoLoader({
-  subsets: ["latin"],
-  display: "swap",
-  fallback: [
-    // https://github.com/primer/css/blob/4113637b3bb60cad1e2dca82e70d92ad05694399/src/support/variables/typography.scss#L37
-    "ui-monospace",
-    "SFMono-Regular",
-    "'SF Mono'",
-    "Menlo",
-    "Consolas",
-    "'Liberation Mono'",
-    "monospace",
-  ],
-  adjustFontFallback: false,
-  preload: true,
-  variable: "--fonts-mono",
-});
-
-export default GeistMono;

lib/styles/fonts/loaders/GeistSans.ts

@@ -1,16 +0,0 @@
-import { Geist as GeistSansLoader } from "next/font/google";
-
-const GeistSans = GeistSansLoader({
-  subsets: ["latin"],
-  display: "swap",
-  fallback: [
-    // https://github.com/system-fonts/modern-font-stacks#system-ui
-    "system-ui",
-    "sans-serif",
-  ],
-  adjustFontFallback: false,
-  preload: true,
-  variable: "--fonts-sans",
-});
-
-export default GeistSans;