Vanilla Breeze

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

${codeExample}

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

Loading Strategy

Best practices for font loading performance:

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