# Coffee — Recommended fonts

The Coffee theme **bundles** its type as woff2 in `assets/fonts/` (latin
subsets, SIL Open Font License 1.1 — see `assets/fonts/OFL.txt`). The three
families become `source=template` rows in the fonts table and are selectable
in the admin typography picker. Templates always resolve font families through
the BlockNinja CSS variables `--font-heading`, `--font-body`, `--font-mono`
with the fallback stacks defined in the theme CSS — no family is hardcoded.

## Bundled families

| Slot      | Family     | Weights   | Role |
|-----------|------------|-----------|------|
| Heading   | Fraunces   | 400, 600  | Ligature-rich display serif for headings and prices. Warm, hand-cut character. |
| Body      | Work Sans  | 400, 600  | Relaxed grotesque for long copy at 17px+. Reads well on cream and espresso backgrounds. |
| Accent    | Caveat     | 400, 700  | Hand-drawn script for badges, stamps, and doodle captions. |

Mono is intentionally **not** bundled: prices and tabular figures fall back to
`"JetBrains Mono", ..., monospace` via `--font-mono`. Assign a mono family from
the Google Fonts tab if you want a specific face.

## Default behaviour (no admin picks)

On a fresh install the admin has not assigned any slot, so `--font-heading` /
`--font-body` / `--font-mono` are unset and the CSS fallbacks apply. Because the
bundled families emit `@font-face` from the fonts table, the fallbacks resolve
to the bundled woff2:

- Headings render in **Fraunces**.
- Body renders in **Work Sans**.
- Hand-drawn accents (`.coffee-hand`) render in **Caveat**.

## How to change

1. Open admin → Theme → Typography.
2. Pick a family per slot (bundled families appear as **Template** fonts; the
   Google Fonts tab offers ~50 more).
3. Assign to Heading / Body / Mono and save.

Note: the platform exposes three controllable slots. The hand-drawn accent
utility resolves through `--font-heading` (falling back to Caveat), so if you
deliberately change the heading font the badge accents follow it — that is the
three-slot model working as intended.

## Fallback stacks (theme CSS)

- `--coffee-heading-fallback`: `"Fraunces", "Playfair Display", Georgia, "Times New Roman", serif`
- `--coffee-body-fallback`: `"Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
- `--coffee-hand-fallback`: `"Caveat", "Segoe Print", "Bradley Hand", cursive`
- `--coffee-mono-fallback`: `"JetBrains Mono", "Fira Code", Menlo, Consolas, monospace`