Superminaren/hackerspace.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(resources): use next/font CSS variables, not literal font names

Browse Source 
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.
This commit is contained in:
Moheeb Zara
2026-05-14 15:26:47 -07:00
parent 7e15dd1e63
commit 9332320920
2 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(resources)/resources.css
+9 -4
View File
@@ -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;
}