What Is the Font Pair Preview Tool?
Compare a heading and paragraph font using your own editable samples. Choose from 43 heading fonts, 41 body fonts and six preset combinations. Copy CSS exports a Google Fonts import and two scoped classes for the same sizes, weights and line heights as the preview. It does not export an image or guarantee that a pairing suits every design.
How to Use the Font Pair Preview Tool
- Choose a heading and body font, or select a preset.
- Edit both samples using the words and scripts you intend to publish.
- Watch the loading status. If a font fails, the preview uses fallback fonts; check your connection and use Retry font loading.
- Copy CSS into the start of your stylesheet. Apply texttoolbox-pair-heading and texttoolbox-pair-body to the corresponding elements.
- Inspect the destination page with its actual widths, background and font environment.
How the Font Pair Preview Tool Works
Only selected family/weight combinations are requested. Runtime stylesheet requests are keyed by family and weight, so another tool cannot suppress a different weight through a shared family-only ID. Heading weight is 700 except Righteous, which uses its regular 400 face; body weight is 400. The exported import requests those same weights and combines duplicate families.
The Font Loading API reports whether matching faces have loaded for the sample. This is separate from glyph coverage: some characters may still come from a fallback font. Font errors and timeouts have visible recovery. Loading a preset name does not certify its appearance in every browser. The preset cards are selectors, not a preloaded font gallery.
Font Pair Preview Tool Example
| Element | Family and weight | Size and line height |
|---|---|---|
| Heading | Playfair Display, 700 | 1.6rem, 1.2 |
| Body | Open Sans, 400 | 0.875rem, 1.65 |
| Whitespace | Both classes use pre-wrap | Spaces/line breaks are retained, with wrapping |
When to Use the Font Pair Preview Tool
Page typography draft
Compare your real headline and body copy before applying a pair to a page.
Preset comparison
Use the six combinations as starting points; the names describe a design suggestion, not measured popularity.
Import troubleshooting
Check selected weights and fallback behavior before integrating the CSS into your stylesheet.
Common Mistakes
Font loading failure can leave a visually plausible fallback. Read the status instead of assuming the selected family is visible. The import belongs before other stylesheet rules; an editor or host stylesheet can change the result. CSS Copy does not carry your sample words, download fonts for an offline document or apply styling inside a plain-text profile field.
Empty sample fields remain empty. More than 5,000 UTF-16 units per field or unsupported controls disable the output without shortening input. If Copy fails, select the CSS output manually. Reset restores the first pair, both default samples, copy feedback and triggers a new readiness check. Random selects independently from the two lists and can select the same family for both.
Tips for Better Results
Use a heading with a different visual role from the paragraph, then read a real paragraph at the intended width. Compare punctuation, digits and non-Latin characters rather than relying on a short English sample. The preview follows the existing site theme; there is no separate tool theme switch. Colors and page margins are not exported. Check licenses and loading performance for your final font integration.
References: Google Fonts CSS2 requests and FontFaceSet.load. Loading status and matching CSS settings are not real-browser visual or accessibility certification.