From 9332320920ac8350c6f8186d764c16248b3fc8ff Mon Sep 17 00:00:00 2001
From: Moheeb Zara <hackbuildvideo@gmail.com>
Date: Thu, 14 May 2026 15:26:47 -0700
Subject: [PATCH] fix(resources): use next/font CSS variables, not literal font
 names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The audit caught a real bug: `resources.css` declared
`font-family: 'IBM Plex Mono'` and `font-family: 'Libre Baskerville'`
as literal font names. `next/font/google` does not register the loaded
webfonts under those names — it generates hashed family names and
exposes them via `--font-ibm-plex-mono` and `--font-libre-baskerville`
CSS variables on the same element that gets the `*-module__*__variable`
class.

The shipped CSS therefore never used the downloaded webfonts; visitors
without the fonts installed locally saw the generic monospace / Georgia
fallback chain instead of the intended typography.

Switched all four font-family declarations to reference the variables
first, then the literal name, then a generic family:

  font-family: var(--font-ibm-plex-mono), 'IBM Plex Mono', ui-monospace, ...
  font-family: var(--font-libre-baskerville), 'Libre Baskerville', Georgia, serif

Also fixed the Wordmark SVG which had a hardcoded `fontFamily` SVG
attribute (overrides CSS); replaced with an inline `style` referencing
the same CSS variable.

Verified the CSS bundle now contains var(--font-ibm-plex-mono) and
var(--font-libre-baskerville) at the relevant rules.
---
 app/(resources)/resources.css  | 13 +++++++++----
 components/resources/icons.tsx |  5 ++++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/(resources)/resources.css b/app/(resources)/resources.css
index 1c4e6aa..16bb357 100644
--- a/app/(resources)/resources.css
+++ b/app/(resources)/resources.css
@@ -15,9 +15,14 @@
   --res-text-muted:   #404040;
   --res-accent:       #d4ff00;
 
+  /* next/font/google sets --font-ibm-plex-mono and --font-libre-baskerville
+   * on this element's classlist. Use them so the loaded webfonts actually
+   * render; fall back to the user's system "IBM Plex Mono" / Libre
+   * Baskerville if present, then to generic mono / serif.
+   */
   background: var(--res-bg);
   color: var(--res-text);
-  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-ibm-plex-mono), 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 16px;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
@@ -124,7 +129,7 @@
 }
 
 .resources-root .resources-hero-title {
-  font-family: 'Libre Baskerville', Georgia, serif;
+  font-family: var(--font-libre-baskerville), 'Libre Baskerville', Georgia, serif;
   font-size: clamp(1.75rem, 4vw, 2.5rem);
   font-weight: 400;
   line-height: 1.15;
@@ -227,7 +232,7 @@
 }
 
 .resources-root .resources-card-title {
-  font-family: 'Libre Baskerville', Georgia, serif;
+  font-family: var(--font-libre-baskerville), 'Libre Baskerville', Georgia, serif;
   font-size: 1.625rem;
   font-weight: 400;
   letter-spacing: -0.01em;
@@ -342,7 +347,7 @@
 }
 
 .resources-root .resources-author-name {
-  font-family: 'Libre Baskerville', Georgia, serif;
+  font-family: var(--font-libre-baskerville), 'Libre Baskerville', Georgia, serif;
   font-size: 1.5rem;
   font-weight: 400;
 }
diff --git a/components/resources/icons.tsx b/components/resources/icons.tsx
index c295967..ea2caee 100644
--- a/components/resources/icons.tsx
+++ b/components/resources/icons.tsx
@@ -15,10 +15,13 @@ export function Wordmark(props: IconProps) {
       className="wordmark"
       {...props}
     >
+      {/* font-family pulls from the parent's CSS, which is the next/font
+        * variable set by `(resources)/layout.tsx`. Falls back through
+        * system mono if for any reason the var is unset. */}
       <text
         x="0"
         y="34"
-        fontFamily="'IBM Plex Mono', monospace"
+        style={{ fontFamily: 'var(--font-ibm-plex-mono), "IBM Plex Mono", ui-monospace, monospace' }}
         fontSize="28"
         fontWeight="500"
         fill="currentColor"