block/themes-noir
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(noir): self-served @font-face + preset typography (bundled fonts are inert)

Browse Source 
The CMS never consumes LoadedPlugin.BundledFonts, so fonts.json alone renders
fallback sans. Declare @font-face against the served artifact paths
(/templates/noir/fonts/*.woff2) in the appended CSS and set
typography.fontHeading/body/mono = template:noir:<Family> in all five presets
so --font-heading/--font-body/--font-mono resolve to the bundled faces
(IBM Plex Mono / Source Serif 4). gotham@1.2.0 precedent.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-06 19:55:04 +08:00
parent 830f51d047
commit 1283b86ffa
2 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
manifest.yaml
View File

@ -120,6 +120,17 @@ css:
var(--font-heading|body|mono, <fallback>) — never a hardcoded face. var(--font-heading|body|mono, <fallback>) — never a hardcoded face.
============================================================ */ ============================================================ */
/* Bundled 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/noir/fonts/...). Presets set typography.fontHeading/body/mono
to template:noir:<Family> so --font-heading/--font-body/--font-mono
resolve to these families. (gotham@1.2.0 precedent.) */
@font-face { font-family: 'Source Serif 4'; src: url('/templates/noir/fonts/source-serif-4-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('/templates/noir/fonts/source-serif-4-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/templates/noir/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/templates/noir/fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@layer utilities { @layer utilities {
/* --- Typography slots -------------------------------------- */ /* --- Typography slots -------------------------------------- */
/* Fallback stacks name the ideal typewriter faces first /* Fallback stacks name the ideal typewriter faces first

35
presets.json
View File

@ -5,6 +5,13 @@
"description": "The default. High-key gallery by day, ink-black type, evidence red. Darkroom black by night lit by an amber safelight.", "description": "The default. High-key gallery by day, ink-black type, evidence red. Darkroom black by night lit by an amber safelight.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:noir:IBM Plex Mono",
"fontBody": "template:noir:Source Serif 4",
"fontMono": "template:noir:IBM Plex Mono",
"fontSizeBase": "17",
"lineHeightBase": "1.7"
},
"lightColors": { "lightColors": {
"background": "40 14% 96%", "background": "40 14% 96%",
"foreground": "24 12% 10%", "foreground": "24 12% 10%",
@ -55,6 +62,13 @@
"description": "Red-forward in both modes. The colour of the string on the board and the line under the name.", "description": "Red-forward in both modes. The colour of the string on the board and the line under the name.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:noir:IBM Plex Mono",
"fontBody": "template:noir:Source Serif 4",
"fontMono": "template:noir:IBM Plex Mono",
"fontSizeBase": "17",
"lineHeightBase": "1.7"
},
"lightColors": { "lightColors": {
"background": "20 10% 97%", "background": "20 10% 97%",
"foreground": "0 8% 8%", "foreground": "0 8% 8%",
@ -105,6 +119,13 @@
"description": "The darkroom under amber safelight. Warm bone paper by day, deep umber and amber glow by night.", "description": "The darkroom under amber safelight. Warm bone paper by day, deep umber and amber glow by night.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:noir:IBM Plex Mono",
"fontBody": "template:noir:Source Serif 4",
"fontMono": "template:noir:IBM Plex Mono",
"fontSizeBase": "17",
"lineHeightBase": "1.7"
},
"lightColors": { "lightColors": {
"background": "38 30% 95%", "background": "38 30% 95%",
"foreground": "30 18% 12%", "foreground": "30 18% 12%",
@ -155,6 +176,13 @@
"description": "Steel and cold light. Grey-blue neutral by day, slate-black room lit by a single steel lamp by night.", "description": "Steel and cold light. Grey-blue neutral by day, slate-black room lit by a single steel lamp by night.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:noir:IBM Plex Mono",
"fontBody": "template:noir:Source Serif 4",
"fontMono": "template:noir:IBM Plex Mono",
"fontSizeBase": "17",
"lineHeightBase": "1.7"
},
"lightColors": { "lightColors": {
"background": "210 16% 95%", "background": "210 16% 95%",
"foreground": "215 22% 12%", "foreground": "215 22% 12%",
@ -205,6 +233,13 @@
"description": "Pure document. Stark black-on-white by day, near-monochrome by night, with the faintest red where the bar lifts.", "description": "Pure document. Stark black-on-white by day, near-monochrome by night, with the faintest red where the bar lifts.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:noir:IBM Plex Mono",
"fontBody": "template:noir:Source Serif 4",
"fontMono": "template:noir:IBM Plex Mono",
"fontSizeBase": "17",
"lineHeightBase": "1.7"
},
"lightColors": { "lightColors": {
"background": "0 0% 98%", "background": "0 0% 98%",
"foreground": "0 0% 8%", "foreground": "0 0% 8%",