Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
font-pairer
Interactive font pairing tool with Google Fonts loading, live preview, curated suggestions, and CSS export.
Overview
The <font-pairer> component helps you discover and pair heading + body fonts. Select from a curated list of 30 Google Fonts organized by category, preview the pairing live, and export as CSS custom properties or @import statements. Part of the Design System Pack tooling.
Basic usage
<font-pairer heading-font="Playfair Display" body-font="Inter" show-export show-suggestions></font-pairer>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
heading-font | string | Playfair Display | Google Fonts family name for headings |
body-font | string | Inter | Google Fonts family name for body text |
sample | string | The Art of Typography | Custom sample heading text |
show-export | boolean | — | Show Copy CSS and Copy @import toolbar |
show-suggestions | boolean | — | Show curated pairing suggestion pills |
Events
| Event | Detail | When |
|---|---|---|
font-pairer:change | { heading, body } | Either font selection changes |
Font Library
The curated font list includes 30 popular Google Fonts across four categories:
| Category | Fonts |
|---|---|
| Serif | Playfair Display, Merriweather, Lora, Source Serif 4, Libre Baskerville, Crimson Text, DM Serif Display, Cormorant Garamond |
| Sans-Serif | Inter, Open Sans, Roboto, Lato, Nunito, Work Sans, DM Sans, Plus Jakarta Sans, Space Grotesk, Manrope, IBM Plex Sans, Outfit |
| Display | Bebas Neue, Abril Fatface, Oswald, Sora, Fraunces |
| Monospace | JetBrains Mono, Fira Code, IBM Plex Mono, Source Code Pro |
Curated Pairings
When show-suggestions is set, the component displays 12 pre-tested font pairings as clickable pills:
With suggestions
<font-pairer show-suggestions show-export></font-pairer>Export Formats
Two export options:
- Copy CSS —
--font-heading: "Playfair Display", serif;+--font-body: "Inter", sans-serif; - Copy @import — Full Google Fonts
@import url(...)statements for both fonts with all available weights
Design System Workflow
Pair this tool with the Palette Generator and Gradient Builder to explore your design system's visual identity:
- Pick heading + body fonts that match your brand personality
- Copy the CSS and paste into your theme file as
--font-headingand--font-bodytokens - The fonts will cascade to all VB components automatically