<font-pairer>
Interactive font pairing tool — pick heading, body, code, and display fonts from a curated Google Fonts list, preview them in context, edit sample text live, and export as CSS custom properties.
Overview
The <font-pairer> component is an authoring tool for exploring font pairings. Pick up to four font roles — heading, body, code, and display — from a curated Google Fonts list, preview them across several real-world contexts (combined, article, card UI, hero), and edit the sample text inline to see how each pairing holds up against your own copy. When you land on a pairing you like, export it as CSS custom properties or a Google Fonts @import statement.
<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 |
Initial Google Fonts family name for the heading role. |
body-font |
string | Inter |
Initial Google Fonts family name for the body role. |
code-font |
string | JetBrains Mono |
Initial Google Fonts family name for the code/monospace role. |
display-font |
string | same as heading-font |
Initial Google Fonts family name for the display/decorative role. |
sample |
string | — | Custom sample heading text. |
preview |
string | combined |
Preview mode: combined, article, long-article, card, or hero. |
show-export |
boolean | — | Show the Copy CSS / Copy @import toolbar. |
show-suggestions |
boolean | — | Show curated pairing suggestions in a sidebar. |
Editable previews
Every sample line in the preview is contenteditable. Click into a heading, body paragraph, or code block and type your own content — the pairing renders live against whatever you write, so you can judge a pairing against real copy instead of generic placeholder text.
<font-pairer heading-font="Fraunces" body-font="Source Sans 3" preview="article"></font-pairer>Curated suggestions
Set show-suggestions to surface a sidebar of pre-vetted heading/body pairings. Selecting one updates the heading, body, and display roles together.
<font-pairer heading-font="Libre Baskerville" body-font="Nunito Sans" show-suggestions></font-pairer>Export Format
Set show-export to reveal a Code panel with two copy actions:
- Copy CSS
- Emits
--font-heading,--font-body,--font-code, and--font-displaycustom properties with the correct generic fallback (serif, sans-serif, monospace) for each role. - Copy @import
- Emits the Google Fonts
@import url(...)statement(s) needed to load every selected family and weight.
--font-heading: "Fraunces", serif;--font-body: "Source Sans 3", sans-serif;--font-code: "JetBrains Mono", monospace;--font-display: "Fraunces", serif;Events
| Event | Detail | Description |
|---|---|---|
font-pairer:change |
{ heading, body, code, display } |
Fires whenever a font role changes — via the role selects or a suggestion pill. |
Accessibility
- Font role selects are native
<select>elements grouped by category (serif, sans-serif, display, monospace) via<optgroup>. - Preview mode tabs and suggestion pills are real
<button type="button">elements, reachable and activatable by keyboard. - Editable sample text uses
contenteditable="plaintext-only"so pasted content can't smuggle in rich markup. - Google Fonts are loaded on demand per selection; no network request fires until a font is actually chosen.