1d9a4c8ce6
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously an unversioned directory inside ~/src/blockninja-themes/editorial. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
40 lines
2.7 KiB
Markdown
40 lines
2.7 KiB
Markdown
# Editorial — recommended Google Fonts
|
|
|
|
This theme ships with no bundled fonts in the current build pass
|
|
(`fonts.json = []`). Admins assign fonts via the BlockNinja typography panel.
|
|
The theme's CSS routes every `font-family` through the host-provided
|
|
`--font-heading`, `--font-body`, and `--font-mono` custom properties with
|
|
fallback stacks taken from spec §5, so the layout is usable before any font
|
|
is picked.
|
|
|
|
For the intended editorial aesthetic, open the typography panel in admin and
|
|
add each of the following from the **Google Fonts** tab:
|
|
|
|
| Slot | Family | Source | Weights / styles | Why |
|
|
|-----------|-----------------------|--------------------|------------------------------------------------------------------|----------------------------------------------------------------------|
|
|
| Heading | Playfair Display | `google:Playfair Display` | 700 normal, 900 italic | Didone display face for the masthead wordmark and headlines. |
|
|
| Body | Source Serif 4 | `google:Source Serif 4` | 400 normal, 400 italic, 600 normal | Long-read body type; italic for marginalia and figcaptions. |
|
|
| UI / caption (body slot) | Inter | `google:Inter` | 500 normal, 600 normal | Byline names, timestamps, and small-caps section labels. |
|
|
| Mono | JetBrains Mono | `google:JetBrains Mono` | 400 normal | Code, datelines on financial copy, ISSN in the colophon. |
|
|
|
|
## How to assign
|
|
|
|
1. In the BlockNinja admin, open **Settings → Theme → Typography**.
|
|
2. Click the **Google Fonts** tab.
|
|
3. Search for the family above (e.g. "Playfair Display"), then click **Add**.
|
|
4. Once added, the family appears in the picker for that slot.
|
|
5. Assign **Playfair Display** to the *Heading* slot.
|
|
6. Assign **Source Serif 4** to the *Body* slot.
|
|
7. Assign **JetBrains Mono** to the *Mono* slot.
|
|
8. (Optional) For UI / caption elements that ride the body slot but want a
|
|
sans-serif treatment, override per-block via the editor.
|
|
|
|
## Wave-2 (out of scope here)
|
|
|
|
If the editorial brand is going to be locked in to a specific commercial
|
|
display face (e.g. *Migra* or *PP Editorial New* instead of *Playfair
|
|
Display*), licence and bundle the woff2 set, then update `fonts.json` to
|
|
declare the family + variants. The CSS does not change — the same
|
|
`var(--font-heading)` consumer pattern picks up the bundled face once an
|
|
admin assigns it.
|