Are these Google Fonts? Can I use them for free?

Yes - all 22 pairings use Google Fonts, which are free to use in any project (personal or commercial) under the SIL Open Font License or Apache License 2.0. Fonts are loaded dynamically from the Google Fonts CDN.

How do I add the selected fonts to my project?

The @import snippet at the bottom of the preview shows the exact CSS to copy. Paste it into your CSS file or HTML tag. Then use font-family: 'Font Name', serif/sans-serif in your CSS.

Why do some fonts take a moment to appear?

Fonts are loaded from the Google Fonts CDN the first time you select a pair. After initial load they are cached by the browser, so subsequent selections of the same fonts are instant.

Can I preview with my own text?

Yes - edit the 'Heading text' and 'Body text' inputs to preview your actual content. This is the best way to judge whether a pairing works for your specific project.

/ developer tools

Font Pairing Tool

Live

Playfair Display

Source Sans 3

Serif + SansClassic editorial, timeless

Merriweather

Open Sans

Serif + SansReadable and professional

Lora

Lato

Serif + SansWarm and approachable

Cormorant Garamond

Proza Libre

Serif + SansHigh-fashion editorial

Libre Baskerville

Source Sans 3

Serif + SansNewspaper / blog

DM Serif Display

DM Sans

Serif + SansGoogle DM family

Bitter

Open Sans

Serif + SansLong-form reading

Raleway

Open Sans

Sans + SansClean and modern

Montserrat

Hind

Sans + SansStartup and tech

Poppins

Lato

Sans + SansFriendly geometric

Nunito

Nunito Sans

Sans + SansRounded and soft

Josefin Sans

Raleway

Sans + SansGeometric minimalist

Rubik

Karla

Sans + SansContemporary SaaS

Oswald

Open Sans

Display + SansBold and impactful

Abril Fatface

Lato

Display + SansLoud and confident

Anton

Roboto

Display + SansHigh contrast editorial

Lobster

Cabin

Script + SansFun and friendly

Pacifico

Arimo

Script + SansRetro casual

Dancing Script

Lato

Script + SansElegant celebration

Space Grotesk

Space Mono

TechDeveloper aesthetic

Inter

JetBrains Mono

TechApp UI with code

IBM Plex Sans

IBM Plex Mono

TechIBM design system

Heading text

Body text

Heading size34px

Body size16px

The quick brown fox jumps

Subheading in Playfair Display

Over the lazy dog. The right font pairing makes content easier to read and gives your design a distinct personality. Mix and match to find your perfect combination.

Anchor linkCaption / label

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@400;700&display=swap');

Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.

Find the perfect font combination from 22 hand-curated Google Font pairings across 5 categories: Serif+Sans, Sans+Sans, Display+Sans, Script+Sans, and Tech. Fonts load dynamically via the Google Fonts API. Preview includes H1 heading, H2 subheading, body paragraph, primary button, anchor link, and caption - all in the selected fonts. Adjust heading and body sizes with sliders. Toggle dark/light background. See the Google Fonts @import snippet for each pair.

How to Use

1Filter by category (Serif+Sans, Tech, etc.) or browse all pairings
2Click any pair in the left list to load it in the preview
3Type your own heading and body text in the inputs to preview real content
4Adjust font size sliders to match your design needs
5Toggle Light/Dark to check the pairing in both modes
6Copy the @import snippet at the bottom to use the fonts in your project

Features

22 curated Google Font pairings across 5 categories: Serif+Sans, Sans+Sans, Display+Sans, Script+Sans, Tech
Category filter buttons for quick browsing
Fonts loaded dynamically from Google Fonts CDN on selection
Preview renders heading (H1 + H2), body paragraph, primary button, anchor link, and caption
Custom heading and body text inputs
Heading and body font size sliders
Light / Dark background toggle
@import CSS snippet shown for every pair
100% browser-based - no data uploaded

Font Pairing Tool

The quick brown fox jumps

Subheading in Playfair Display

How to Use

Features

Frequently Asked Questions

/ related tools

Community Feedback

Reviews

Rate & Review

/ share this tool