Font Pairing and Font Stacks for WordPress Sites
Typography does most of the work in a design. Two decisions matter most: which fonts you pair, and what visitors see while those fonts are still loading. This guide covers both.
Font pairing: the basics
Most sites need two fonts, sometimes three:
- Headline font: expressive, sets the personality.
- Body font: calm and very readable at small sizes.
- Optional subheadline or accent font.
Rules that rarely fail:
- Contrast, not conflict. Pair a serif heading with a sans-serif body, or a bold display font with a neutral sans. Two similar-but-different sans-serifs look like a mistake.
- One personality per page. Let the headline font carry the style; keep the body font quiet.
- Check the body font at 16px on a phone. That’s where most reading happens.
- Limit weights: regular and bold for body, one or two for headings.
Proven combinations: Playfair Display + Lato (classic), Poppins + Montserrat (modern), Oswald + a neutral sans (bold), a script like Great Vibes only for short accents.
Font stacks: what shows while fonts load
A web font never appears instantly. Until it arrives, the browser shows a fallback. A font stack is the ordered list of fonts it tries:
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;If Montserrat hasn’t loaded, the browser uses Helvetica Neue (on Macs), then Arial (almost everywhere), then any sans-serif. A good stack:
- starts with your web font,
- continues with system fonts of similar width and height, so the page doesn’t jump when the web font arrives,
- ends with a generic family (
sans-serif,serif,monospace).
Common starting points:
| Style | Stack |
|---|---|
| Sans | system-ui, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif |
| Serif | Georgia, Cambria, "Times New Roman", Times, serif |
| Mono | ui-monospace, Menlo, Consolas, monospace |
Doing it in WordPress with Font Hero
Font Hero covers both halves:
- Font Pairing presets: in Fonts → Add Font → Use Presets, pick one of 16 curated pairings (classic, modern, bold, creative). Font Hero installs the headline, subheadline and body fonts in one click, with regular and semi-bold for the body.
- Font Stacks: in Font Hero → Font Stacks, create a named stack (“Heading Font”, “Body Text”), add fonts in order (your registered fonts plus system fonts, labelled by platform), or start from a preset (sans, serif, monospace…). Drag to reorder.
- In the editor: stacks appear in the Gutenberg font picker, so you apply them to any block without writing CSS.
Make sure the fonts themselves load fast too: see how to reduce font load in WordPress.
Pair fonts and control fallbacks
Font Hero: one-click font pairings, font stacks in the Gutenberg picker, and fast self-hosted fonts.
