Aa Aa Font Pairing Tool

headings · body · Google Fonts · WordPress

The Font Pairing Tool helps you pair display and text fonts from Google Fonts: search and filter by category, preview on multiple layouts (article, hero, cards, UI form), browse curated combinations, and see contrast and harmony hints. Tune size, weight, line-height, and letter spacing — then copy or download the CSS for WordPress or any front end.

Heading font

H Playfair Display

Size 36px

Weight 700

Line height 1.15

Letter spacing −0.02em

Body font

B Source Serif 4

Size 17px

Weight 400

Line height 1.70

Letter spacing 0.00em

Curated pairings

Layout

Theme

✎ editable copy

Select a font pair

How to refine your pairing

Aim for family contrast: a decorative or serif display for headings with a calm sans or serif for body often works well.
Use curated pairs as a starting point — they are chosen for hierarchy and on-screen readability.
Check multiple layouts and color schemes (light, dark, paper) to mimic real pages.
When exporting CSS, load only the font weights you need to keep performance tight.