# Google Fonts pairings: 25 combinations that work

[Canonical HTML page](https://gradiently.design/guide/google-fonts-pairings)

Every pair here is free on Google Fonts and chosen for how it behaves in real headings and body text. Grouped by the feeling you want, with the weights that make each one work.

## The short version

- A good Google Fonts pairing gives the heading and the body clearly different jobs, usually by contrasting a display or serif face with a plain sans.
- Pairs from the same superfamily, such as DM Serif Display with DM Sans or IBM Plex Sans with IBM Plex Mono, are the safest place to start.
- Body text needs a font with a generous x height and open shapes in a regular weight of 400; headings can carry more personality.
- Fonts on Google Fonts are released under open licences that allow commercial use, including in logos, products and client work.
- Load only the weights you use, and add display=swap, to keep pages fast.

The best **Google Fonts pairings** contrast a characterful heading face with a quiet, readable body face: Fraunces with Inter, Playfair Display with Source Sans 3, Space Grotesk with Inter, or DM Serif Display with DM Sans. Below are 25 combinations grouped by mood, each with the weights that make it work and what it suits. All are free, all allow commercial use, and all load from one line of code. Pick a group by feeling first, then a pair by job.

## How to read these pairings

Each pair is heading first, body second. The heading weight is the one to use at large sizes; body text stays at 400 with 600 or 700 for emphasis. If you are new to the reasoning, [font pairing](https://gradiently.design/guide/font-pairing) explains why contrast beats similarity, and [serif vs sans serif](https://gradiently.design/guide/serif-vs-sans-serif) covers what each family brings.

An editorial style portrait post with a large display headline above smaller, calmer supporting text

A pairing gives the page two voices. The heading attracts; the body explains. They should never compete.

## Editorial pairings: serif headings with sans body

The classic structure. A serif heading adds warmth and authority; a sans body keeps long reading easy on screens.

| # | Heading | Body | Suits |
| --- | --- | --- | --- |
| 1 | Playfair Display 700 | Source Sans 3 400 | Magazines, restaurants, weddings |
| 2 | Fraunces 600 | Inter 400 | Food, craft brands, newsletters |
| 3 | DM Serif Display 400 | DM Sans 400 | Agencies, portfolios, landing pages |
| 4 | Instrument Serif 400 | Instrument Sans 400 | Modern editorial, studios, fashion |
| 5 | Cormorant Garamond 600 | Work Sans 400 | Beauty, interiors, boutique hotels |
| 6 | Libre Baskerville 700 | Libre Franklin 400 | Publishing, law, considered long reads |

Fraunces has an optical size axis: at large sizes its details sharpen. Cormorant Garamond is delicate on screens, so keep it to headings.

## Modern sans pairings for tech and product

For software, startups and anything that should feel current. The heading carries the character through shape, width or quirky details, while the body is a workhorse.

| # | Heading | Body | Suits |
| --- | --- | --- | --- |
| 7 | Space Grotesk 700 | Inter 400 | Developer tools, fintech, dashboards |
| 8 | Syne 700 | Manrope 400 | Creative studios, events, music |
| 9 | Sora 600 | Figtree 400 | Apps, SaaS sites, onboarding |
| 10 | Unbounded 600 | Plus Jakarta Sans 400 | Futuristic brands, gaming, launches |
| 11 | Archivo Black 400 | Archivo 400 | Bold product pages, sport, retail |

Unbounded and Syne are wide and loud: keep headings short. Archivo pairs with itself because its black weight is a different animal from its regular.

## Sans headings with serif body text

The reverse structure suits long reading: a clean sans heading signals sections, and a serif body feels bookish and slows the eye pleasantly.

| # | Heading | Body | Suits |
| --- | --- | --- | --- |
| 12 | Poppins 600 | Lora 400 | Blogs, coaching, personal sites |
| 13 | Montserrat 700 | Merriweather 400 | Guides, nonprofits, reports |
| 14 | Bricolage Grotesque 700 | Newsreader 400 | Essays, independent media |
| 15 | Outfit 600 | Source Serif 4 400 | Documentation, course material |

## Friendly and rounded pairings

| # | Heading | Body | Suits |
| --- | --- | --- | --- |
| 16 | Fredoka 600 | Nunito 400 | Children's brands, toys, family cafés |
| 17 | Quicksand 700 | Mulish 400 | Wellness, pets, gentle services |
| 18 | Rubik 600 | Karla 400 | Community apps, local services, charities |

Rounded faces feel approachable but soft. Quicksand looks light below 600; use its heavier weights for anything that must read.

## Bold display pairings for posters and social

Condensed and heavy display faces fit big words into small frames, which is why they dominate thumbnails and posters. They need a calm partner. [Thumbnail text](https://gradiently.design/guide/typography-for-thumbnails) and [headline fonts](https://gradiently.design/guide/headline-fonts) go further.

| # | Heading | Body | Suits |
| --- | --- | --- | --- |
| 19 | Anton 400 | Roboto 400 | Thumbnails, sport, news style posts |
| 20 | Bebas Neue 400 | Montserrat 400 | Gyms, events, bold menus |
| 21 | Oswald 600 | Lato 400 | Posters, campaigns, sales |
| 22 | Abril Fatface 400 | Poppins 400 | Fashion posts, drinks, nightlife |

## Technical and luxury pairings

| # | Heading | Body | Suits |
| --- | --- | --- | --- |
| 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Developer docs, data, research |
| 24 | Space Grotesk 500 | Space Mono 400 | Indie software, zines, portfolios |
| 25 | Bodoni Moda 500 | Jost 400 | Jewellery, perfume, high end retail |

In 24 the mono is the body: it works for short notes and labels, not essays. Bodoni Moda's hairlines are happiest large, above about 32 px.

## Mistakes that break a pairing

### Avoid

- Two similar sans serifs, which look like a mistake
- Two display faces fighting for attention
- A hairline serif for body text on screens
- Loading every weight of both families
- A third font for one special heading

### Do

- Clear contrast in structure, weight or width
- One loud face and one quiet one
- Body at 400 in a face with a generous x height
- Only the two to four weights you use
- Use weight or size from your two fonts instead

## How to add a Google Fonts pairing to your site

1. **Choose weights** Usually one heading weight and two body weights. Every extra weight is another file to download.
2. **Copy the embed** Select the families on Google Fonts and copy the link it gives you, or adapt the code below.
3. **Set roles in CSS** Give headings and body their own font family variables, so a later swap is a one line change.
4. **Test with real copy** Check a long paragraph, a two line heading and your longest product name before you commit.

```html
<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=Fraunces:wght@600&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  :root {
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
  }
  h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }
  body { font-family: var(--font-body); font-weight: 400; }
</style>
```

Pairing 2, Fraunces with Inter, loading only three weights. Swap the family names for any pair above.

Google Fonts are free for commercial use, but read [font licensing](https://gradiently.design/guide/font-licensing) before you modify one or sell it as part of a product. To make the choice stick across a whole brand, turn it into a [typography system](https://gradiently.design/guide/brand-typography-system) with named roles.

For social posts and decks, set your pair once in a Gradiently brand kit (part of Pro), which holds a heading and a body font and accepts [uploaded font files](https://gradiently.design/guide/custom-fonts-upload), and the Designer uses them when it lays out a design.

## FAQ

### What are the best Google Fonts pairings?

Reliable starting points are Fraunces with Inter, Playfair Display with Source Sans 3, DM Serif Display with DM Sans, and Space Grotesk with Inter.

### What font goes well with Montserrat?

Merriweather for body text gives a classic sans and serif contrast. Bebas Neue works above Montserrat as a bold poster heading.

### What pairs well with Playfair Display?

A plain, open sans for body text, such as Source Sans 3, Lato or Inter. Avoid pairing it with another high contrast serif.

### Are Google Fonts free for commercial use?

Yes. Fonts on Google Fonts use open licences, mostly the SIL Open Font License, that allow commercial use, including logos, websites, print and client work. Read the licence on each font's page if you plan to modify or redistribute the files.

### How many fonts should a website use?

Two is plenty for most sites: one for headings and one for body text, in only the weights you need.