Font pairing finder

Preview curated Google Font pairings for headings and body text to find a combination that fits your brand.

Preview text

Playfair Display

Paired with Source Sans Pro — The quick brown fox jumps over the lazy dog.

Poppins

Paired with Inter — The quick brown fox jumps over the lazy dog.

Merriweather

Paired with Lato — The quick brown fox jumps over the lazy dog.

Oswald

Paired with Open Sans — The quick brown fox jumps over the lazy dog.

DM Serif Display

Paired with DM Sans — The quick brown fox jumps over the lazy dog.

Frequently asked questions

How do I use a pairing?

Load the two Google Fonts on your site, then apply the heading font to titles and the body font to paragraphs.

Related tools

See all 10 free css & design tools

CSS Gradient Generator

Design linear and radial gradients and copy ready-to-use CSS code.

Use CSS Gradient Generator

Box Shadow Generator

Fine-tune offset, blur and color with live preview, then copy the CSS.

Use Box Shadow Generator

Border Radius Previewer

Adjust each corner independently and copy the CSS border-radius.

Use Border Radius Previewer

SVG Pattern Generator

Create tiling dots, stripes, grid or cross-hatch background patterns.

Use SVG Pattern Generator

Font pairing finder

Preview curated Google Font pairings for headings and body text to find a combination that fits your brand.

Preview text

Playfair Display

Paired with Source Sans Pro — The quick brown fox jumps over the lazy dog.

Poppins

Paired with Inter — The quick brown fox jumps over the lazy dog.

Merriweather

Paired with Lato — The quick brown fox jumps over the lazy dog.

Oswald

Paired with Open Sans — The quick brown fox jumps over the lazy dog.

DM Serif Display

Paired with DM Sans — The quick brown fox jumps over the lazy dog.

Frequently asked questions

How do I use a pairing?

Load the two Google Fonts on your site, then apply the heading font to titles and the body font to paragraphs.

Related tools

See all 10 free css & design tools

CSS Gradient Generator

Design linear and radial gradients and copy ready-to-use CSS code.

Use CSS Gradient Generator

Box Shadow Generator

Fine-tune offset, blur and color with live preview, then copy the CSS.

Use Box Shadow Generator

Border Radius Previewer

Adjust each corner independently and copy the CSS border-radius.

Use Border Radius Previewer

SVG Pattern Generator

Create tiling dots, stripes, grid or cross-hatch background patterns.

Use SVG Pattern Generator