Font Pairing Tool

Try heading and body font pairs on your own text, then copy the CSS.

Free. Runs in your browser, no sign-up.

Font pair
Adjust

Edit any text below

Harbour Street Bakery

Fresh bread and cakes, baked every morning

We open at seven, six days a week. Order celebration cakes three days ahead, and ask about wholesale prices for cafes and restaurants. Everything is made on site in small batches.

Order a cake

CSS for your website

How to use it

  1. Choose your industry to narrow the list, or browse all pairs.
  2. Type your business name and a line about what you do into the preview.
  3. Adjust size, weight, line height and letter spacing, and switch between phone and desktop width.
  4. Copy the CSS and the font link for your website.

Good to know

  • Fonts load from Google Fonts when you select a pair. Google receives a normal web request from your browser for the font files.
  • Every font listed is published under the SIL Open Font License, which allows commercial use. Read the licence on Google Fonts before embedding a font in a product you sell.

Questions

How many fonts should my brand use?

Two is usually enough: one with character for headings and one that is easy to read for body text. Some brands use a single family in different weights.

Can I use these fonts in my logo?

The SIL Open Font License allows use in logos. A font cannot be trademarked by you, so a logo built only from type is harder to protect than one with a distinctive mark.

Related reading

Rather have a designer do it? Logos, brand identities and social kits by vetted professionals.

Request a quote

More free tools

All tools →
Branding Colour Palette Generator Build a five-colour brand palette from one colour, using real colour harmony rules. Open tool → Accessibility Colour Contrast Checker Check text and background colours against WCAG AA and AAA, with fixes that pass. Open tool → Image tools Image Compressor Make photos smaller for your website or email without uploading them anywhere. Open tool →