Pick a heading face and a body face from 38 Google Fonts, set the size and type scale, and read the pair in a live article before you commit. The code panel writes a link tag with only the weights your page uses, so the request never breaks on a missing weight.
Starting pairs
Heading / Body
Pack my box with five dozen liquor jugs. The five boxing wizards jump quickly, while 0123456789 sit beside them so you check the figures too.
Paste your own copy in the box below to replace this text. The first line becomes the headline and every line after it becomes a paragraph.
Every font in the picker carries a class: serif, slab, sans, display or mono. The note under the preview compares the two classes and the heading weight you set. These are the rules behind each verdict.
| Heading | Body | Verdict | Reason |
|---|---|---|---|
| Serif or slab | Sans | Strong | Stroke contrast splits the two levels at a glance. |
| Sans | Serif | Strong for long reads | Serif body text holds the line on sharp screens. Keep paragraphs at 17px or larger. |
| Display | Sans or serif | Strong, headings only | Condensed and fat faces lose their shape under 28px. |
| One family | Same family | Fine | Contrast comes from weight and size alone. Set the heading at 600 or heavier. |
| Sans | A second sans | Risky | Two near-identical shapes look like a mistake. Push the weight gap to 300 or more. |
| Any | Mono | Niche | Fits docs and changelogs. Long prose in mono reads slow. |
| Any | Display | Avoid | Display faces tire the eye after two lines of text. |
Treat the verdict as a rule of thumb, not taste. Fraunces over Lora breaks the serif on serif rule and still looks right on a wine list or a menu. When the label and the preview disagree, trust the preview.
The chips in the tool load these pairs with a matching heading weight. Each pair suits a different kind of page.
With the default pair, the Link tag tab produces three lines for your page head:
<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=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;700&display=swap" rel="stylesheet">crossorigin because font files load in CORS mode.wght@700 asks for the weight you picked and nothing else. Every extra weight is another file download, and most pages never use the 300 or 900 a template requests.<strong>. When a family has no 700, the tool takes the heaviest weight it ships.wght@700;400 with an HTTP 400 error.The CSS rules tab sets two custom properties, --font-heading and --font-body, each with a fallback stack matched to the font class. Headings get sizes from the type scale in rem, so a user who raises the browser font size still gets the right ratios.
family=Lora:ital,wght@0,400;1,400.Weights, licenses, hosting and the errors people hit most.
Two causes cover almost every case. The URL asks for a weight the family does not ship, such as 300 for Playfair Display, or the weights sit out of order, such as 700;400. Both break the whole request, not only one family. Links from this page avoid both.
Three covers most sites: one heading weight, body regular and body bold. Each static weight is a separate WOFF2 file, often 15 to 30 KB for the Latin subset. Ten weights across two families adds a quarter of a megabyte before any image loads.
Yes. Every family on Google Fonts ships under an open license, mostly the SIL Open Font License. Websites, apps, logos and print are all covered. The one restriction under OFL is selling the font files on their own.
For EU visitors, yes, because of the GDPR rulings on IP transfer. Self-hosting also removes a third-party connection. Browsers stopped sharing font caches between sites years ago, so the old speed argument for Google hosting no longer holds.
Often. Inter, Source Sans 3 or Roboto at 400 for text and 700 for headings gives clean, quiet pages. Choose a second family when headings need a different voice from the body, such as a serif for editorial content.
No. The preview renders your copy on this page. The only outside requests go to Google Fonts for the font files themselves, and those carry the font names, not your text.