Custom Fonts

External font loading with Google Fonts, variable fonts, display/body pairings, and font loading API patterns.

Token Reference: See Themes > Extensions for token documentation. Source: src/tokens/extensions/fonts.css

Font Pairings

Popular combinations of display and body fonts.

Playfair Display

Paired with Inter for a classic editorial look. The contrast between serif display and sans-serif body creates visual hierarchy.

Abril Fatface

Bold display type with elegant curves. Works well for headlines in magazine-style layouts.

BEBAS NEUE

All-caps condensed display font. Perfect for bold, modern headlines with impact.

Monospace Fonts

Code-friendly fonts with ligatures and clear distinction.

JetBrains Mono

const greeting = "Hello, World!";
function fibonacci(n) {
  return n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2);
}

Font Tokens

Theme-level font configuration tokens.

Token	Value
`--font-display`	`"Playfair Display", Georgia, serif`
`--font-body`	`"Inter", system-ui, sans-serif`
`--font-mono`	`"JetBrains Mono", ui-monospace, monospace`

/* Theme font tokens */ --font-display: "Playfair Display", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace;

Loading Strategy

Best practices for font loading performance:

Preconnect early: Use <link rel="preconnect"> to establish connections to font servers before they're needed.
Use font-display: Set font-display: swap to show fallback text immediately while fonts load.
Subset fonts: Only load the character sets you need (e.g., &subset=latin) to reduce file size.
Limit weights: Load only the font weights you'll actually use rather than the full family.