Google Fonts Pair Finder
Find a Google Fonts pairing that works: preview a heading and body font together in real article, profile and card layouts, shuffle through 30 curated combinations, and copy the <link>, @import and CSS.
Input
Preview
High-contrast serif display over a quiet humanist sans — the classic editorial pairing.
The quick brown fox jumps over the lazy dog
Good type pairing is mostly about contrast. Two faces that are almost the same read as a mistake; two that differ in structure, weight or width read as a decision. Pick one voice for the headings and one for the reading text, then let size and weight do the rest of the work.
Set the body first at the size people will actually read it, then scale the heading until the hierarchy is obvious at a glance — 1234567890 & ?!
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap">
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
body {
font-family: 'Source Sans 3', sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.6;
}Guides
Picking two typefaces that work together is the part of a design system people get stuck on. The Google Fonts Pair Finder puts a heading font and a body font side by side in real page layouts, loads the actual typefaces from Google's CDN so you are looking at the real thing, and hands you the embed code when you find a combination you like.
Ninety-odd families are included, filtered by category, plus thirty hand-picked pairings that each explain why they work.
How to use it
- Choose a heading font and a body font. Narrow the list with the category filter (sans-serif, serif, display, handwriting, monospace) or search by name.
- Adjust weight and size for each. Only the weights Google actually publishes for that family are offered, so the embed code you copy always resolves.
- Switch the preview between Article, Profile and Card to see the pair in more than one context, and flip on Dark preview to check it on a dark background.
- Copy the HTML
<link>block into your<head>, or the CSS block if you prefer@import— the CSS also includes ready-to-pastefont-familyrules for headings and body.
Curated pair vs. random pair
Curated pair shuffles through thirty combinations chosen by hand, each with a one-line note on what makes it work — a superfamily match like DM Serif Display with DM Sans, or a deliberate clash like Bebas Neue over Karla. Random pair picks any two families that pass your category filters. Random is fun, but most random pairs are unusable; the curated list is the one to start from.
What the contrast read-out means
Above the preview you'll see something like 2.35× size · +300 weight. Those two numbers are the hierarchy: how many times larger the heading is than the body, and how much heavier. If a pair looks muddy, it is almost always because one of those numbers is too small. A size ratio around 2× and a weight gap of 300 or more is a safe starting point for most layouts.
Do these fonts cost anything?
No. Every family here is from Google Fonts and is free for commercial use under an open licence (mostly SIL Open Font License). You can serve them from Google's CDN with the <link> tag above, or download the files and self-host them.
Privacy
The picker, the preview and the code generation all run in your browser. The only network request is the stylesheet Google serves for the two families you're previewing, which is what makes the preview show the real typefaces rather than a substitute.
Related tools
To build a type scale once you've picked the pair, use the Font Modular Scale Generator. To check that your text colour is readable on its background, use the Accessible Color Pair Finder.