Font Pairing Explorer

Search 48 Google Fonts for heading and body, tune weight, size, line height and letter spacing, shuffle pairings, and copy @import, link or Fontsource CSS.

Loading tool…

Font Pairing Explorer — Pick a heading and a body typeface from a searchable, category-filtered catalog of 48 popular Google Fonts, then fine-tune each role's weight, size, line height and letter spacing and watch the result render live with your own text. Hit shuffle to discover fresh combinations, and copy a ready-to-paste snippet as a CSS @import rule, an HTML link tag, or Fontsource npm imports. Only the two fonts you choose are fetched by your browser directly from Google's public Fonts CSS API; your sample text and settings never leave your device.

What is Font Pairing Explorer?

The Font Pairing Explorer is a free in-browser tool for web designers, developers and content creators who want a polished heading-plus-body type combination without trawling font libraries. Two independent searchable pickers let you filter 48 curated Google Fonts by serif, sans, display or mono and choose a typeface for each role, while per-role controls set the font weight, size, line height and letter spacing. A live preview renders your own headline and paragraph in the actual fonts, and a shuffle button proposes random pairings when you need inspiration. When you are happy, copy the generated CSS in your preferred format — a @import rule, an HTML link tag, or Fontsource-style npm imports — and drop it into a landing page, blog theme, slide deck or design system.

How to use Font Pairing Explorer

  1. In the heading picker, filter by serif, sans, display or mono, type to search, and click a font to select it.
  2. Do the same in the body picker to choose a complementary typeface for paragraph text.
  3. Open the settings to set each role's weight, font size, line height and letter spacing.
  4. Type your own headline and sentence in the sample field, or leave it blank for the default text; press Shuffle for random pairing ideas.
  5. Choose the output format — @import, <link> or Fontsource — and copy the generated CSS into your stylesheet or project.

Examples

Editorial headline with a readable body

Input

Heading: Playfair Display 700 · Body: Source Sans 3 400

Output

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

Link tag for plain HTML

Input

Format: <link>

Output

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

Fontsource imports for a bundler

Switch the format to Fontsource and the snippet becomes an npm install line plus per-weight imports like import '@fontsource/inter/700.css'; — ready for a React, Vite or Next.js project.

Frequently asked questions

How do I choose the two fonts?
Each role has its own picker. Filter the catalog by serif, sans, display or mono, type part of a family name to search, and click a result to select it. The heading and body are chosen independently, and the Shuffle button picks a random pair for you.
Can I control weight, size, line height and letter spacing?
Yes. Open the settings to set the font weight, font size in pixels, line height and letter spacing (in em) separately for the heading and the body. Every change appears in both the live preview and the copied CSS.
What output formats can I copy?
Three: a CSS @import rule, an HTML <link> tag with preconnect hints, and Fontsource-style npm imports (npm i @fontsource/… plus per-weight import lines). All three include the same font-family, weight, size, line-height and letter-spacing rules for h1–h3 and body.
Where do the fonts come from, and is my text private?
When you pick a pairing your browser loads only those two families directly from Google's public Fonts CSS API at fonts.googleapis.com — a third-party request made straight from your browser, not proxied through our servers. Your sample text and settings stay entirely on your device.
Which fonts are included?
A curated set of 48 popular Google Fonts across serif, sans-serif, display and monospace — including Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono and more.

Related tools

Code to Image

Turn a code snippet into a syntax-highlighted image in your browser, with 20+ languages, custom themes and backgrounds, line numbers, and PNG or SVG export.

Color Contrast Checker

Check the WCAG 2.1 contrast ratio and APCA Lc score between text and background colors, see AA, AAA and 3:1 badges, and apply the nearest passing color.

Color Mixer

Blend two HEX colors at a chosen ratio in RGB or Lab color space and read the resulting mid color back as a swatch and copyable HEX value.

Color Shades Generator

Turn one base HEX color into a perceptual OKLCH, HSL, or RGB shade scale with adjustable stops, WCAG contrast hints, and CSS, Tailwind, and JSON export.