Font Pairing Tool

Browse 15 curated Google Fonts combinations for headings and body text. Copy the CSS import and try a pair in your own page.

Browser-based processingResults depend on your deviceFree, no sign-up

Curated Google Fonts pairings. Click copy to get the CSS import for a pair.

Playfair Display + Source Sans 3
Editorial / magazine
serif + humanist sans
Space Grotesk + Inter
Modern tech / SaaS
grotesque + neutral sans
Merriweather + Open Sans
Long-form reading
slab-ish serif + sans
Montserrat + Lora
Elegant marketing
geometric sans + serif body
Oswald + Roboto
Bold / sporty
condensed + neutral
Raleway + Merriweather
Refined portfolio
thin sans + serif
Poppins + PT Serif
Friendly startup
rounded geometric + serif
Archivo Black + Archivo
Brutalist / punchy
same family contrast
DM Serif Display + DM Sans
Boutique brand
matched superfamily
Bebas Neue + Source Sans 3
Poster / event
display caps + sans
Libre Baskerville + Nunito Sans
Classic with warmth
book serif + soft sans
IBM Plex Mono + IBM Plex Sans
Developer / docs
mono display + sans
Fraunces + Work Sans
Quirky editorial
soft serif + grotesque
Manrope + Manrope
Single-family minimal
weight contrast only
Abril Fatface + Karla
Fashion / bold
fat face + quirky sans
JSON Formatter & Validator
Format, validate and minify JSON with exact error line & column — everything runs in your browser.
URL Encoder / Decoder
Percent-encode text for URLs or decode %20-style strings — component or full-URL mode, in your browser.
JWT Decoder
Decode a JWT’s header and payload, humanize exp/iat claims and spot expired tokens — nothing leaves your device.
UUID Generator
Generate one or thousands of random version-4 UUIDs from your browser’s secure random generator.

Choose a Google Fonts pair for your layout

Start with Playfair Display + Source Sans 3 for an editorial layout or Space Grotesk + Inter for a product page. Copy the CSS from the card. Paste it into a page and check a real heading and paragraph at the width where they will be read.

Test the pair with your own words

Use the the CSS tab in HTML Preview or a draft page to check line breaks, small text and fallback fonts. Test accented characters if your site has multiple languages. The generated CSS requests fonts from Google Fonts when used in a page.

Frequently Asked Questions

  • Can I enter any two fonts?
    The tool lists 15 curated combinations. It gives you CSS to test those pairs in your own layout.
  • What does the copied CSS include?
    It includes a Google Fonts import and font-family rules for headings and body text.
200 free tools
Browser-based tools
Local file processing
Free — no sign-up