fix(gotham): activate bundled display faces — @font-face in theme CSS + preset typography

The host never consumes bundled_fonts (LoadedPlugin.BundledFonts is dead),
so Antonio/Cormorant rendered as system sans. Declare @font-face against
the served artifact paths (/templates/gotham/fonts/) and set
typography.fontHeading/body/mono (template:gotham:*) on all five presets.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-06 19:33:58 +08:00
parent e242c44743
commit ff2c30103b
2 changed files with 49 additions and 0 deletions

View File

@ -126,6 +126,20 @@ css:
* come from var(--font-heading|body|mono, <fallback>). No literal colours * come from var(--font-heading|body|mono, <fallback>). No literal colours
* except black scrims layered over IMAGES (letterbox effect). * except black scrims layered over IMAGES (letterbox effect).
*/ */
/* Bundled display faces. The host does not yet emit @font-face for
* bundled_fonts (LoadedPlugin.BundledFonts is unconsumed), so the theme
* declares its own faces against the served artifact paths
* (/templates/gotham/fonts/...). Presets set typography.fontHeading/body
* to template:gotham:<Family> so --font-heading/--font-body resolve to
* these families. */
@font-face { font-family: 'Antonio'; src: url('/templates/gotham/fonts/antonio-latin.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/templates/gotham/fonts/cormorant-garamond-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/templates/gotham/fonts/cormorant-garamond-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/templates/gotham/fonts/cormorant-garamond-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/templates/gotham/fonts/cormorant-garamond-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/templates/gotham/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@layer utilities { @layer utilities {
/* reel-rule — brass hairline, 1px ascending to 2px. */ /* reel-rule — brass hairline, 1px ascending to 2px. */
.reel-rule { border: none; border-top: 1px solid hsl(var(--primary)); margin: 0; } .reel-rule { border: none; border-top: 1px solid hsl(var(--primary)); margin: 0; }

View File

@ -5,6 +5,13 @@
"description": "Deep matte black lifted by brass gilt. The house palette. Silver-screen platinum by day, velvet black after dark.", "description": "Deep matte black lifted by brass gilt. The house palette. Silver-screen platinum by day, velvet black after dark.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:gotham:Antonio",
"fontBody": "template:gotham:Cormorant Garamond",
"fontMono": "template:gotham:IBM Plex Mono",
"fontSizeBase": "17",
"lineHeightBase": "1.6"
},
"lightColors": { "lightColors": {
"background": "40 20% 96%", "background": "40 20% 96%",
"foreground": "28 16% 9%", "foreground": "28 16% 9%",
@ -55,6 +62,13 @@
"description": "Cool blue-black steel with bright brass. A colder, later room.", "description": "Cool blue-black steel with bright brass. A colder, later room.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:gotham:Antonio",
"fontBody": "template:gotham:Cormorant Garamond",
"fontMono": "template:gotham:IBM Plex Mono",
"fontSizeBase": "17",
"lineHeightBase": "1.6"
},
"lightColors": { "lightColors": {
"background": "220 16% 95%", "background": "220 16% 95%",
"foreground": "222 22% 10%", "foreground": "222 22% 10%",
@ -105,6 +119,13 @@
"description": "Near-black warmed with rose-gold. The velvet-rope room.", "description": "Near-black warmed with rose-gold. The velvet-rope room.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:gotham:Antonio",
"fontBody": "template:gotham:Cormorant Garamond",
"fontMono": "template:gotham:IBM Plex Mono",
"fontSizeBase": "17",
"lineHeightBase": "1.6"
},
"lightColors": { "lightColors": {
"background": "20 20% 95%", "background": "20 20% 95%",
"foreground": "18 18% 10%", "foreground": "18 18% 10%",
@ -155,6 +176,13 @@
"description": "Graphite and cool silver. Restrained, low on gold. The quiet booth.", "description": "Graphite and cool silver. Restrained, low on gold. The quiet booth.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:gotham:Antonio",
"fontBody": "template:gotham:Cormorant Garamond",
"fontMono": "template:gotham:IBM Plex Mono",
"fontSizeBase": "17",
"lineHeightBase": "1.6"
},
"lightColors": { "lightColors": {
"background": "210 8% 95%", "background": "210 8% 95%",
"foreground": "210 13% 10%", "foreground": "210 13% 10%",
@ -205,6 +233,13 @@
"description": "Espresso black and whisky amber. The last-pour palette.", "description": "Espresso black and whisky amber. The last-pour palette.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:gotham:Antonio",
"fontBody": "template:gotham:Cormorant Garamond",
"fontMono": "template:gotham:IBM Plex Mono",
"fontSizeBase": "17",
"lineHeightBase": "1.6"
},
"lightColors": { "lightColors": {
"background": "36 24% 94%", "background": "36 24% 94%",
"foreground": "28 22% 9%", "foreground": "28 22% 9%",