block/themes-coffee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
themes-coffee/RECOMMENDED_FONTS.md
Alex Dunmow 11c6c8c63e initial: theme plugin coffee 
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously
an unversioned directory inside ~/src/blockninja-themes/coffee.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-06 14:11:22 +08:00

2.4 KiB
Raw Permalink Blame History

Coffee — Recommended fonts

The Coffee theme ships fonts.json = [] per the wave-1 FONTS.md policy. No woff2s are bundled in this pass. Templates resolve font families through the BlockNinja CSS variables --font-heading, --font-body, and --font-mono with the fallback stacks defined in assets/style.css. The site admin assigns fonts in the typography panel; the picks below are the spec-aligned defaults that match the visual identity.

How to apply

  1. Open the admin → Theme → Typography panel.
  2. Switch to the Google Fonts tab.
  3. Search and pick each family below.
  4. Assign to the matching slot (Heading / Body / Mono).
  5. Save. The picks are persisted as google:<Family> and rendered as @import URLs by theme.GenerateCSS().

Picks

Slot Source Family Why
Heading google:Fraunces Fraunces Ligature-rich display serif. Italic stylistic alternates land on h2/h3 headings; pairs with the spec's "Quentin Blake ink lines" aesthetic.
Body google:Inter Inter Relaxed body sans for long copy at 17px+. Excellent screen rendering across cream and espresso backgrounds.
Mono google:JetBrains Mono JetBrains Mono Tabular-numerals mono for prices in menu_board and featured_pour, and hours in hours_strip.

All three are already in the curated Google Fonts list in the picker and have permissive SIL OFL 1.1 licences.

Fallback stacks (used before admin picks fonts)

Defined in assets/style.css:

  • --coffee-heading-fallback: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif
  • --coffee-body-fallback: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
  • --coffee-mono-fallback: "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace

Templates always consume the variable form, e.g. font-family: var(--font-heading, var(--coffee-heading-fallback)).

Wave-2 follow-up

If/when bundling becomes necessary (offline-first deployments, brand exclusivity), commission/license the spec's exact Fraunces weights (Regular 400, SemiBold 600, BoldItalic 700), Inter (Regular 400, Medium 500), and JetBrains Mono (Regular 400), and re-populate fonts.json per FONTS.md §"fonts.json schema". A LICENSES.md at the theme root must also land in that pass.