Typography

The default for body and headings is Inter. ClashDisplay and MangoGrotesque ship alongside as opt-in display faces. Inter loads via next/font/google; the two display families are self-hosted woff2 files.

Tokens

Every text decision flows through these CSS variables on :root:

--bwo-font-sans: 'Inter', ui-sans-serif, system-ui, …;
--bwo-font-display: var(--bwo-font-sans);            /* defaults to Inter */
--bwo-font-clash: 'ClashDisplay', var(--bwo-font-sans);
--bwo-font-mango: 'MangoGrotesque', var(--bwo-font-sans);
--bwo-font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, …;

Override --bwo-font-display to give every heading a non-Inter face without touching component code, or apply --bwo-font-clash / --bwo-font-mango per-element when you only want it in one spot.

Heading scale

Headings use --bwo-font-display at weight 600 by default, with tight tracking (-0.02em). The .hero h1 rule tightens further to -0.035em for poster-size titles.

ClashDisplay

Display face from Fontshare (free for commercial use). Loaded locally from /public/fonts/clash-display/ in five weights.

MangoGrotesque

Alternate display face — taller x-height, more condensed. Useful for badges, tabular labels, or a contrasting hero. Apply font-family: var(--bwo-font-mango) on a specific element, or override--bwo-font-display globally to switch every heading.

Inter

Body face. Loaded from Google Fonts via next/font/google in app/layout.tsx, which generates a self-hosted subset at build time (zero runtime third-party requests).

Custom theming

To replace a family across the site, point the token at your own font in a global stylesheet:

:root {
  --bwo-font-sans: 'Geist', sans-serif;
  --bwo-font-display: 'ClashDisplay', sans-serif;
}

The library itself never hard-codes a family — everything flows through tokens. To make every heading use the included ClashDisplay (or MangoGrotesque), alias the display variable:

:root {
  /* opt every heading in to ClashDisplay */
  --bwo-font-display: var(--bwo-font-clash);

  /* or, for MangoGrotesque */
  --bwo-font-display: var(--bwo-font-mango);
}