Best Google Fonts Combinations for Website Headings and Body Text

A good font pairing uses contrast with harmony: two fonts different enough to tell headings from body text, but similar enough in proportions to look like they belong together. These Google Fonts combinations are reliable starting points.

Pairings that work

• Playfair Display + Source Sans 3: an elegant high-contrast serif for headings with a clean sans for reading. Good for editorial and lifestyle sites.
• Montserrat + Merriweather: a geometric sans for headings and a sturdy, screen-friendly serif for body text.
• Lora + Open Sans: a warm serif heading with a neutral, very readable body font.
• Roboto Slab + Roboto: same family, so they match perfectly. Easy, safe and modern.
• Inter alone: one family in different weights for everything. Clean and fast, popular for apps and product sites.
• DM Serif Display + DM Sans: a matching serif and sans designed to be used together.

Good serif fonts for body text

If you want a serif for long reading, choose one designed for screens: Source Serif 4, Merriweather, Lora and Literata (made for reading apps) all hold up well at body sizes.

Rules for pairing

• Two families is plenty. Use weights and sizes for more variety.
• Contrast in structure: serif with sans, or display with text, not two similar sans-serifs.
• Similar x-height, so lines of each font sit comfortably together.
• Readable body first: choose the body font for comfort at 16 to 18 pixels, then pick a heading font to suit it.

Loading fonts fast

• Load only the weights you use; each one is another file.
• Use font-display: swap so text shows immediately in a fallback font.
• Prefer variable fonts, which cover many weights in one file.
• Consider hosting the font files yourself. In 2022 a German court found that loading Google Fonts from Google's servers sent visitors' IP addresses to Google without consent, so many EU sites now self-host.

Find fonts you like in the wild

The quickest way to find a pairing is to borrow from sites you admire. Font Detector shows the font family, size and weight of any text you click, so you can see what a site uses for headings and body. Then check whether those fonts, or close alternatives, are on Google Fonts.

For more on readability, see serif vs sans-serif on screens.