Free · Find a heading and body font that match

Font Pairing Previewer

Try headline and body font pairs on a sample business page and copy the CSS to use them.

  • Google Fonts
  • Private in your browser
  • No signup

1Pick fonts

Pick a pair we like

Only the font files are fetched from Google Fonts. Your words stay on this device.

2See them on a page

Loading fonts…

Maple Grove Wellness

Massage, facials, and quiet time for busy people.

Book a visit

What we offer

Every visit starts with a quick chat about what you need today. Then we get to work. Walk-ins are welcome, but booking ahead means no waiting.

Classic session · 60 min$95
Deep session · 90 min$135
First visit special$75
Paste this in your page head
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
And this in your CSS
h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

Three simple steps

How to use it

  1. Pick a heading font and a body font.
  2. Type your own business text to test.
  3. Copy the CSS import and rules.

Your files stay on this device

Only the font files are fetched from Google Fonts. Your text stays on this device.