Free Font Pairing Tool

Find a heading and body font that belong together. See them on a real page with your own business name, fine-tune the sizes, then copy the CSS straight into your site.

Free fonts, hosted by FastSites Page-speed cost shown Language support checked

Make a template with these fonts

Business name

Headline

Mood

Must support

For sites in Greek, Bulgarian, Ukrainian or Vietnamese.

Font pairings

150 pairings · pick one to preview it

Heirloom

Fraunces + Public Sans

Match 97~46 KB · Light

Extended LatinGreekCyrillicVietnameseExtended Latin covers Polish, Czech, Romanian and more.

Harbour Coffee

harbourcoffee.co.uk

Harbour CoffeeAboutServicesPricesJournalGet in touch

Est. 2014 · Independent

Roasted in Falmouth, poured with care.

Harbour Coffee has been doing things properly since 2014. Friendly people, fair prices, and work we are proud to put our name to.

Book nowSee what we do

What we do

Everything you would expect, done carefully and on time.

Where to find us

12 Harbour Street, open seven days a week.

Say hello

Call, email or just pop in. We reply the same day.

Fine-tune

Heading size40pxHeading weight700Body size16pxLine spacing1.60

Lock one font, swap the other

Heading

Fraunces

Soft serif · weights 100–900 · #3 of 213 for Public Sans

Body

Public Sans

Humanist sans · weights 100–900 · #45 of 128 for Fraunces

Why it worksSerif and sans contrastStrokes differ enoughBody has 400 and 600

Heading 1 · 40pxHarbour Coffee

Heading 2 · 28pxWhy people choose us

Body · 16pxFriendly people, fair prices, proper work.

Small · 13pxOpen daily, 8am to 5pm

Your sizes and weight are included.

Show the CSS

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Public+Sans:wght@400;600&display=swap');

:root {
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 1rem; /* 16px */
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
}

h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 1.75rem; } /* 28px */

Hand-picked and scored

The first 60 pairs were chosen by hand. Another 90 passed checks for contrast, font roles, weights and x-height.

Seen on real pages

Try it on a home page, a services list, a price table and a blog post, on desktop and on a phone.

Ready to paste

Copy the Google Fonts import and CSS with your sizes, or open the pairing in your FastSites editor in one click.