fix(cyberpunk): bundle fonts via theme @font-face + preset typography refs

The host does not consume LoadedPlugin.BundledFonts (dead code), so the
three fonts.json families (Orbitron/Share Tech Mono/Inter) never loaded and
rendered as fallback sans. Declare @font-face against the served
/templates/cyberpunk/fonts/*.woff2 paths (weights matching fonts.json
exactly) and point every preset's typography.fontHeading/body/mono at
template:cyberpunk:<Family> so --font-heading/body/mono resolve to the
bundled faces. gotham@1.2.0 precedent.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-06 21:01:18 +08:00
parent ffdd627192
commit 197eb9960b
2 changed files with 40 additions and 2 deletions

View File

@ -122,8 +122,21 @@ css:
/* --- Typography ------------------------------------------- */
/* Families flow through the admin-bound CSS variables; the fallback
leads with the bundled OFL family so the intended look survives
before the admin assigns a slot. @font-face for the bundled
families is auto-emitted from fonts.json (source=template rows). */
before the admin assigns a slot.
Bundled faces: the host does NOT emit @font-face for bundled_fonts
(LoadedPlugin.BundledFonts is unconsumed dead code), so the theme
declares its own @font-face against the served artifact paths
(/templates/cyberpunk/fonts/...). Weights match fonts.json exactly;
presets set typography.fontHeading/body/mono to
template:cyberpunk:<Family> so --font-heading/body/mono resolve here. */
@font-face { font-family: 'Orbitron'; src: url('/templates/cyberpunk/fonts/orbitron-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('/templates/cyberpunk/fonts/orbitron-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('/templates/cyberpunk/fonts/orbitron-latin.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Share Tech Mono'; src: url('/templates/cyberpunk/fonts/share-tech-mono-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/templates/cyberpunk/fonts/inter-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/templates/cyberpunk/fonts/inter-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/templates/cyberpunk/fonts/inter-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/templates/cyberpunk/fonts/inter-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
.cyberpunk-body {
font-family: var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);

View File

@ -5,6 +5,11 @@
"description": "Magenta-led tri-accent, the Cyberpunk default",
"theme": {
"mode": "both",
"typography": {
"fontHeading": "template:cyberpunk:Orbitron",
"fontBody": "template:cyberpunk:Inter",
"fontMono": "template:cyberpunk:Share Tech Mono"
},
"lightColors": {
"background": "240 12% 97%",
"foreground": "260 25% 10%",
@ -55,6 +60,11 @@
"description": "Cyan-led, cooler chrome variant",
"theme": {
"mode": "both",
"typography": {
"fontHeading": "template:cyberpunk:Orbitron",
"fontBody": "template:cyberpunk:Inter",
"fontMono": "template:cyberpunk:Share Tech Mono"
},
"lightColors": {
"background": "200 25% 97%",
"foreground": "220 30% 10%",
@ -105,6 +115,11 @@
"description": "Lime-led, we shipped at 3am",
"theme": {
"mode": "both",
"typography": {
"fontHeading": "template:cyberpunk:Orbitron",
"fontBody": "template:cyberpunk:Inter",
"fontMono": "template:cyberpunk:Share Tech Mono"
},
"lightColors": {
"background": "100 15% 97%",
"foreground": "120 20% 10%",
@ -155,6 +170,11 @@
"description": "Sunset pink over teal — vaporwave arcade at dusk",
"theme": {
"mode": "both",
"typography": {
"fontHeading": "template:cyberpunk:Orbitron",
"fontBody": "template:cyberpunk:Inter",
"fontMono": "template:cyberpunk:Share Tech Mono"
},
"lightColors": {
"background": "30 40% 97%",
"foreground": "300 30% 12%",
@ -205,6 +225,11 @@
"description": "Monochrome terminal — white phosphor on black, restrained neon",
"theme": {
"mode": "both",
"typography": {
"fontHeading": "template:cyberpunk:Orbitron",
"fontBody": "template:cyberpunk:Inter",
"fontMono": "template:cyberpunk:Share Tech Mono"
},
"lightColors": {
"background": "0 0% 98%",
"foreground": "0 0% 8%",