Font Pair Generator
A font pair generator shows a heading typeface and a body typeface together so you can judge the contrast before committing. This one holds 24 Google Fonts pairs across five moods - 7 modern, 5 elegant, 5 classic, 5 bold and 2 tech. Pick Playfair Display with Source Sans 3 and Copy CSS gives you the @import line plus font-family rules for h1-h6 and for body text.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Heading Font
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 !@#$%^&*()
Body Font
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 !@#$%^&*()
Typography Settings
Actions
All Font Pairs ()
Saved Pairs ()
About Font Pair Generator
Every pair on this page is a fixed heading and body combination, not a random draw from a font list, so the contrast between the two is already deliberate. The New pair button jumps to another pair in the category you have selected, and the arrows either side of the pair name step through them in order. The category row filters the set: All, Modern, Elegant, Classic, Bold and Tech, holding 24, 7, 5, 5, 5 and 2 pairs respectively.
The large preview is editable. Click into the heading or the paragraph and type your own words - real copy reveals problems that a pangram hides, such as a heading font whose numerals or capitals do not sit well with your brand name. The three sliders change heading size from 24 to 96 pixels, body size from 12 to 24 pixels and line height from 1 to 2.5 in steps of 0.1, and the Dark preview checkbox flips the specimen card to a dark background without changing the page around it.
Copy CSS produces a block you can paste at the top of a stylesheet: a Google Fonts @import for both families with the weights the rules use, a font-family and font-weight rule for h1 to h6, and a font-family, font-weight and line-height rule for body, p, li and span. Note what it does not carry: the font sizes you set with the sliders are preview-only, so set your own type scale in your project. The heart button stores the current pair in your browser under fwt_font_favs, which means favourites survive a reload but do not follow you to another device.
The typefaces are loaded from fonts.googleapis.com only when a pair is shown, so the page stays light. Licensing comes from Google Fonts itself, not from this site: the project README states that most families in the collection use the SIL Open Font License v1.1, some use the Apache 2 licence and the Ubuntu fonts use the Ubuntu Font License v1.0.
Use Cases
How to use
Choose a mood in the category row - All, Modern, Elegant, Classic, Bold or Tech - to narrow the 24 pairs to the ones that fit the project.
Press New pair to jump to another pairing, or use the arrows on either side of the pair name to step through the category in order.
Click into the heading and the paragraph in the preview card and type your own words; both are editable and the fonts re-render as you type.
Drag the heading size, body size and line height sliders until the specimen matches the size your design will really use, and tick Dark preview if the page will be dark.
Press the heart to keep a pairing in the saved pairs strip lower down the page, which stays there after a reload.
Press Copy CSS and paste the block at the top of your stylesheet: it contains the Google Fonts @import and font-family rules for headings and for body text.
Pro Tips
- Replace the preview words before judging anything. Type the real headline and a real paragraph into the specimen: a pair that looks fine on "The Art of Typography" can fall apart on a nine-word product name.
- The copied CSS carries line-height but not font-size. Set heading and body sizes in your own type scale; the two sliders here exist to test the pairing at your intended size, not to export it.
- Tech holds only two pairs and both use Space Grotesk for headings. If you want more variety for a developer-facing site, look in Modern, which has seven pairs including Outfit with Inter and Work Sans with IBM Plex Sans.
- Hearted pairs live in your browser under the key fwt_font_favs. Clearing site data or opening the page in a private window empties the saved pairs strip, so copy the CSS for anything you actually intend to use.
- The @import in the copied block requests weights 400 and 700 for the heading font and 400, 500 and 700 for the body font. If your design only uses two weights, trim the list before shipping - each extra weight is another file to download.
Troubleshooting
The preview still shows a fallback face and the fonts never arrive.
Both families are fetched from fonts.googleapis.com the first time a pair is shown. A content blocker, a strict corporate proxy or an offline tab will stop that request and the specimen falls back to a generic serif and sans. Allow fonts.googleapis.com and fonts.gstatic.com, then press New pair to trigger the load again.
The pasted CSS changes the typefaces but the text is the wrong size.
That is expected. The exported rules carry font-family, font-weight and line-height only; the heading and body sliders drive the on-page preview and are not written into the block. Add your own font-size declarations, using the slider values as the numbers you tested.
The Tech category shows almost nothing.
Tech contains two pairs, both built on Space Grotesk. It is not a loading fault - the counter beside "All font pairs" shows how many are in the current filter. Switch to Modern, which has seven pairs, for more choice on a developer-facing design.
The saved pairs strip is empty even though pairs were hearted earlier.
Favourites are held in this browser under the localStorage key fwt_font_favs. They disappear when site data is cleared, when the page is opened in a private window, and when you switch browser or device. Copy the CSS for any pairing you plan to keep rather than relying on the heart.
Copy CSS does nothing when the button is pressed.
The button writes to the system clipboard through the browser clipboard API, which needs a secure context and, in some browsers, a permission the page has not been granted. If nothing lands, select the code shown in the CSS panel underneath and copy it manually - the panel always holds the same text the button would have written.
Frequently Asked Questions
Contrast that is obvious plus a shared skeleton. Pairs work when the two faces differ clearly in one dimension - a serif heading against a sans body, or a condensed display face against a neutral text face - while agreeing on proportions such as x-height and stroke contrast. Every combination in this generator is built that way; step through a category with the arrows and the pattern becomes visible.
A tool that shows two typefaces working together instead of one at a time. This page holds 24 hand-picked Google Fonts pairs, displays each as a live heading plus paragraph you can type into, lets you adjust size and line height, and exports the pairing as a CSS block with the matching Google Fonts @import so you can use it immediately.
Start from the role each face plays: one for headings, one for running text. Give the body font the easier job - a workhorse such as Inter, Lato, Open Sans or Source Sans 3 - and let the heading carry the personality. Then check them together at real size. That is exactly what the preview does here, and the Copy CSS block gives you both families in one @import.
From this generator: Playfair Display with Source Sans 3 for editorial pages, Montserrat with Open Sans for a product site, Merriweather with Lato for long-form reading, Oswald with Lato when the heading needs to shout, and Space Grotesk with Space Mono for developer documentation. Use the category row to see the rest grouped by mood.
Three that survive contact with real projects. Use two families, not three, unless one is a monospace for code. Make the difference between them unmistakable, because a near-miss reads as a mistake. Keep the body face conservative and let the heading be the one with character. A fourth, practical rule: check the pairing at your smallest body size before you commit, using the body slider here.
Type the brand name straight into the editable heading and push the heading slider up to 96 pixels - a wordmark is read large and letterfit matters more than legibility. Step through a category with the arrows and watch the awkward letter pairs. Be aware the licence that matters for a logo is the individual family licence on Google Fonts, not this page.
Judge the body font first, because visitors spend their time in it. Set the body slider to the size your site really uses, raise line height towards 1.6 or 1.8, and read the paragraph. Only then look at the heading. When it works, Copy CSS gives you an @import and two rules that already target h1-h6 and body, p, li and span.
The pairings themselves are just names, so you can look up both families in the Canva font picker and apply them by hand. What does not carry over is the CSS block, which is meant for a stylesheet. Canva stocks many Google Fonts families but not all of them, so check both names in its picker before you build a whole template on a pairing.
The editable preview is one. Paste your real heading and a real paragraph in, set the sizes to match your design, and you are testing your own content rather than a sample. What no automatic checker can do is decide whether the pairing suits your audience - that judgement stays with you, which is why the preview is editable rather than scored.
They come from the Google Fonts collection, whose project README states that most families use the SIL Open Font License v1.1, some use the Apache 2 licence and the Ubuntu fonts use the Ubuntu Font License v1.0. Those are all open licences, but the terms belong to each family, so open the font page on Google Fonts and read its licence before shipping a paid product.