Which Google Fonts go well together?

A common approach is to contrast a serif with a sans serif. In this list Playfair Display with Source Sans 3, Merriweather with Lato, Abril Fatface with Lato and Bitter with Raleway put a serif heading over a sans serif body, and Ubuntu with Lora and Cabin with Old Standard TT do the reverse. Lora with Merriweather is the one all-serif pair. The tool runs no contrast or readability check, so read each pair at the sizes you will use.

Why does Abril Fatface look bold in my headings?

Abril Fatface and Fjalla One come in one weight, 400. The copied link still asks for 400 and 700, and Google Fonts answers with the 400 face only. Browsers make h1 to h3 bold by default and Copy CSS sets no weight, so they draw a synthetic bold. Add font-weight: 400 to the heading rule for those two fonts.

How do I add two Google Fonts to one page?

Use one request with both families. Copy Google Fonts link writes family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700 for the first pair: a space in a name is a +, each family has its own family= part, and wght@400;700 asks for the regular and bold weights (Google Fonts CSS API v2).

What does Copy CSS write?

Two rules: h1, h2, h3 { font-family: 'Montserrat', sans-serif; } and body { font-family: 'Open Sans', sans-serif; } for the first pair. The fallback after the name is serif for Playfair Display, Merriweather, Lora, Abril Fatface, Bitter and Old Standard TT, and sans-serif for every other family. The rules set font-family only; sizes, weights and line height stay in your own CSS.

Is Source Sans Pro in the list?

The list uses the name Source Sans 3, as Google Fonts shows it today; its specimen page there is titled "Source Sans 3 - Google Fonts". The pair that older lists call Playfair Display and Source Sans Pro appears here as Playfair Display and Source Sans 3.

What does the preview send to Google?

The preview loads the fonts from fonts.googleapis.com and fonts.gstatic.com, and Google sees your IP address like any web request. Only the family names are part of that address; the headline and paragraphs you type are not sent.

Font Pair Generator

Get a heading and body font pairing from 15 Google Fonts combinations, lock or swap either font, try your own text, and copy the CSS or the Google Fonts link. How it works

Montserrat & Open Sans

Sans Serif

Heading font

Body font

Headline text

Paragraph text

The quick brown fox jumps over the lazy dog

Subheading Text Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View Heading Font View Body Font

Font previews load the selected fonts from Google Fonts (fonts.googleapis.com and fonts.gstatic.com).

About the Font Pair Generator

Montserrat with Open Sans is the first of 15 hand-picked Google Fonts pairings this tool shows, a sans serif heading over a sans serif body. Generate New swaps in a different pair at random, or only the unlocked font when you lock the other, and either font can be chosen from the 21 families in the list. Copy CSS writes the two font-family rules, and Copy Google Fonts link writes one link tag that loads both families.

The 15 pairs

Heading font	Body font	Label
Montserrat	Open Sans	Sans Serif
Playfair Display	Source Sans 3	Mixed
Merriweather	Lato	Mixed
Roboto	Roboto Condensed	Sans Serif
Raleway	Roboto	Sans Serif
Oswald	Lato	Sans Serif
Ubuntu	Lora	Mixed
Poppins	Open Sans	Sans Serif
Nunito	Nunito Sans	Sans Serif
Lora	Merriweather	Serif
Fjalla One	Nunito	Sans Serif
Quicksand	Open Sans	Sans Serif
Abril Fatface	Lato	Mixed
Bitter	Raleway	Mixed
Cabin	Old Standard TT	Mixed

The label is worked out from the two fonts: Serif when both are serif, Sans Serif when neither is, Mixed otherwise. A pair you build yourself gets its label the same way.

How to use this tool

Read the pair named above the preview and look at the heading and body samples.
Press Generate New until a pair suits you; each press shows a different one. To keep one font, pick it in its list and press its padlock: Generate New then changes only the other font.
Type your own headline and paragraph text to see it in the pair; a blank line starts a new paragraph.
Press Copy CSS for the font-family rules, or Copy Google Fonts link for a link tag that loads both families.
Use View Heading Font or View Body Font to open that family on Google Fonts.

Frequently asked questions

Which Google Fonts go well together?: A common approach is to contrast a serif with a sans serif. In this list Playfair Display with Source Sans 3, Merriweather with Lato, Abril Fatface with Lato and Bitter with Raleway put a serif heading over a sans serif body, and Ubuntu with Lora and Cabin with Old Standard TT do the reverse. Lora with Merriweather is the one all-serif pair. The tool runs no contrast or readability check, so read each pair at the sizes you will use.
Why does Abril Fatface look bold in my headings?: Abril Fatface and Fjalla One come in one weight, 400. The copied link still asks for 400 and 700, and Google Fonts answers with the 400 face only. Browsers make h1 to h3 bold by default and Copy CSS sets no weight, so they draw a synthetic bold. Add font-weight: 400 to the heading rule for those two fonts.
How do I add two Google Fonts to one page?: Use one request with both families. Copy Google Fonts link writes family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700 for the first pair: a space in a name is a +, each family has its own family= part, and wght@400;700 asks for the regular and bold weights (Google Fonts CSS API v2).
What does Copy CSS write?: Two rules: h1, h2, h3 { font-family: 'Montserrat', sans-serif; } and body { font-family: 'Open Sans', sans-serif; } for the first pair. The fallback after the name is serif for Playfair Display, Merriweather, Lora, Abril Fatface, Bitter and Old Standard TT, and sans-serif for every other family. The rules set font-family only; sizes, weights and line height stay in your own CSS.
Is Source Sans Pro in the list?: The list uses the name Source Sans 3, as Google Fonts shows it today; its specimen page there is titled "Source Sans 3 - Google Fonts". The pair that older lists call Playfair Display and Source Sans Pro appears here as Playfair Display and Source Sans 3.
What does the preview send to Google?: The preview loads the fonts from fonts.googleapis.com and fonts.gstatic.com, and Google sees your IP address like any web request. Only the family names are part of that address; the headline and paragraphs you type are not sent.

Important limitations

The pairs are a fixed list and Generate New is a random pick, so the same pair can come back after another. The specimen is always black text on white. If Google refuses the weights request, the tool asks without weights, and if that fails it names the family Google Fonts did not serve and the preview shows a fallback font for it. The headline takes up to 200 characters and the paragraphs up to 2,000. The sizes are fixed; to try one font at your own sizes, use the CSS Font Preview tool. With one font locked, the other is drawn from all 21 families, so the result is not one of the 15 checked pairs. Nothing is saved between visits.

Sources

Last reviewed: 2026-10-22

Network use

This tool loads fonts from Google Fonts (fonts.googleapis.com and fonts.gstatic.com), which see your IP address. Privacy policy

Choosing a heading and body font

A new landing page, blog theme or portfolio needs one face for headings and one for running text, and scrolling the Google Fonts catalog for both at once is slow. This tool holds 15 fixed pairs, starting with Montserrat with Open Sans, each labeled Serif when both fonts are serif, Sans Serif when neither is, and Mixed otherwise. Every press of Generate New shows a different pair on a white specimen page: a headline, a subheading and paragraphs in the body font. Either font can be picked from the 21 families the pairs use, and the padlock keeps one while Generate New replaces only the other. Type your own headline and paragraphs, with a blank line between paragraphs, to read your words in the pair. View Heading Font and View Body Font open each family on Google Fonts to check its weights and languages. There is no style filter or size control.

What the copy buttons write

h1, h2, h3 { font-family: 'Montserrat', sans-serif; }
body { font-family: 'Open Sans', sans-serif; }

That is Copy CSS for the first pair. Copy Google Fonts link writes a <link> that asks for regular and bold, 400 and 700, of both families in one request: https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap. The fallback after each name is serif or sans-serif to match the font, so a page that cannot reach Google still shows the right kind of face. Both families come in one stylesheet request, which saves a round trip over two separate links.

The link asks for 700 for every family, but two fonts in the list, Abril Fatface and Fjalla One, have only a 400 weight. Google Fonts then serves the 400 face alone, and headings set in them get a bold the browser makes up unless the heading rule sets font-weight: 400.

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.