How do I use Google Fonts on my website?

Copy the embed link and paste it inside the of your HTML, then reference the font-family in your CSS. This tool generates both snippets for you.

What makes a good font pairing?

Good pairings create contrast without conflict. A common rule is to pair a serif with a sans-serif, or a display font with a neutral body font. Avoid using two fonts that are too similar.

Will Google Fonts slow down my site?

Modern Google Fonts loads over HTTP/2 and caches aggressively. Using display=swap prevents invisible text during load. Load only the weights you actually use.

Can I use these fonts commercially?

Yes. All fonts on Google Fonts are licensed under open-source licences (most commonly OFL or Apache), which allow commercial use with no royalties.

How many font weights should I load?

Load only what you use. Most projects need just two weights per family — for example 400 (regular) and 700 (bold). Each extra weight adds to page load time.

Google Font Pairing

Pick a heading and body font, preview them live, and copy the CSS in one click.

Curated pairings

Heading font

Playfair Display

Body font

Lato

Body size 16px

Typography Preview

The Art of Beautiful Typography

How the right font pairing transforms a design from ordinary to extraordinary

Typography is the art of arranging type to make written language legible and visually appealing. A great heading font establishes personality and hierarchy, while a well-chosen body font ensures your content is comfortable to read across all devices and sizes.

Subheading in Playfair Display

The pairing above combines Playfair Display for headings with Lato for body copy. Notice how the two typefaces complement each other while maintaining clear visual hierarchy.

Get started Playfair Display 700 · Lato 400 · 16px

Embed link

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400&display=swap">

CSS

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400&display=swap');

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 16px;
}

How it works

1 Click any curated pairing card to load a proven font combination instantly.
2 Fine-tune by choosing a different heading or body font from the searchable list. Each font is rendered in its own typeface.
3 Adjust font weight and body size using the controls — the preview updates live.
4 Copy the HTML embed link or the full CSS block and paste into your project.