block/themes-editorial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
themes-editorial/RECOMMENDED_FONTS.md
Alex Dunmow 1d9a4c8ce6 initial: theme plugin editorial 
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>
2026-06-06 14:11:28 +08:00

2.7 KiB
Raw Permalink Blame History

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.