Font Pairing
The Font Pairing tool previews 12 curated Google Fonts combinations for headings and body text, lets you mix fonts yourself, and copies the matching CSS @import.
About this tool
The Font Pairing tool previews 12 curated Google Fonts combinations for headings and body text, lets you mix fonts yourself, and copies the matching CSS @import.
How to use it
- Pick one of the curated pairings, or choose a heading and body font yourself.
- Use Random Pairing to explore combinations.
- Read the live preview of heading and paragraph text.
- Click Copy CSS @import to load the fonts on your site.
Good to know
- A classic pairing contrasts a serif with a sans-serif, such as Playfair Display with Source Sans 3.
- Pairings include Montserrat + Merriweather, Raleway + Lato, Space Grotesk + Inter and DM Serif Display + DM Sans.
- Limiting a site to two font families keeps pages consistent and reduces download size.
- The preview loads the chosen fonts from Google Fonts at weights 400 and 700.
- Adding display=swap to the font URL shows fallback text while the web font loads.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
What fonts go well together?
Fonts with contrasting styles but similar proportions usually pair well, such as a high-contrast serif heading with a clean sans-serif body. The curated pairings here are proven combinations.
How many fonts should a website use?
Two families — one for headings and one for body text — is enough for most sites. A third is rarely needed.
Are Google Fonts free for commercial use?
Yes. Fonts in the Google Fonts library are released under open licenses such as the SIL Open Font License and can be used commercially.
How do I add the fonts to my site?
Paste the copied @import at the top of your CSS, or convert it to a link tag in your HTML head, then set font-family on your headings and body.