Font Pairing Preview Tool
Pick a heading font and body font from 35 popular Google Fonts, see an instant live preview, and copy the CSS import snippet to use in your project. Fonts load from Google CDN - nothing else is uploaded.
Learn more: why some font pairs look right
X-height matters more than point size
Two fonts set at the same point size can still look mismatched, because point size describes the em box a font was designed in, not how tall its lowercase letters look. Your eye reads the x-height, the height of a lowercase "x" relative to the font size. Fonts with similar x-heights sit comfortably together, while two with very different x-heights can clash even at the same size in your CSS.
One workhorse, one accent
The tool has 35 Google Fonts in four groups: 15 sans-serif, 10 serif, 4 monospace and 6 display. A dependable approach is to choose one font for body text, from sans or serif, and one accent font for headings, rather than two fonts with the same weight and personality that compete for attention. The starting pairing is Playfair Display for headings and Source Sans 3 for body text, at 36 and 16 pixels with a line height of 1.6.
Check the weights as well. The sans and serif fonts here offer two to five weights, but the six display fonts, including Bebas Neue and Lobster, come in regular weight only. If your CSS asks for a bold heading in one of them, the browser fakes the bold. Set font-weight to 400 on those headings instead.
The CSS you copy
The snippet imports both fonts and sets heading and body variables. Each font gets a fallback stack that matches its group, such as Georgia and serif for a serif font, so the page still reads if the web font fails to load.
FAQ
Why do two sans-serif fonts look uneven together?
Sans-serif covers fonts with very different proportions, widths and x-heights. Compare the rendered preview with your own text, not just the group name.
Should headings and body text use different fonts?
Not always. One family used at different weights, such as a bold headline over regular body text, is often cleaner than adding a second typeface.
Why does the preview load slowly the first time?
Each font is requested from Google Fonts when you pick it, so your browser contacts Google to download the file. Your browser caches it afterwards, so the same font previews faster the next time.