Font Pairing Generator

About the Font Pairing Generator

Pick two fonts that work together — one for headings, one for text — and see them on your own words before you commit. Start from a curated pairing, filter by style and mood (modern, elegant, playful, editorial, technical …), or press Shuffle to build a new pair from the library, keeping a font you like locked. Every pair comes with plain notes on why it works: the contrast between the two faces, cautions such as capital-only or script fonts, and the x-height of each font measured in your browser.

The fonts are open-licence (SIL OFL 1.1) families such as Inter, Montserrat, Poppins, Noto Sans, Archivo, Anton, Bebas Neue, Caveat and Great Vibes, served from this site, so nothing is requested from Google while you browse; serif, monospace and humanist system font stacks need no download at all. Preview the pair as an article, a landing page and a card, then copy the code three ways: a Google Fonts <link> or @import, Fontsource npm installs, or self-hosted @font-face rules with a ZIP of the font files and their licences — plus the CSS or Tailwind theme that applies the pair.

Common uses

• Choosing the typography for a new website, blog, app or portfolio.
• Finding a text font that suits a display or script font you already have, by locking it and shuffling the other.
• Getting self-hosted font files with ready @font-face CSS instead of loading fonts from a third party.
• Setting up a Tailwind CSS theme with heading and body font families.
• Pairing Hindi and English text with fonts that draw Devanagari.

What makes two fonts work together

Good pairs differ clearly in one thing and agree in others. The most reliable contrast is structure: a serif or a display face for headings over a plain sans-serif for text, or a geometric sans-serif (round, built from circles) over a grotesque or humanist one. Two faces of the same structure — two geometric sans-serifs, say — look almost alike, which reads as a mistake, so the shuffle never pairs them. A single family can also carry a whole design when the weights are far apart, such as 800 for headings and 400 for text. Moods help as well: a playful script and a sober technical face rarely sit well together. The Google Fonts Knowledge library explains these ideas in depth.

Choosing how to load the fonts

• Google Fonts is the quickest: one <link>, and each visitor’s browser fetches the fonts from Google’s servers, which see the visitor’s IP address. A German court (Landgericht München I, case 3 O 17493/20) awarded a visitor damages under the GDPR because a website passed his IP address to Google this way without his consent. Self-hosting avoids the request.
• Fontsource packages the same fonts for npm, so your build tool bundles them with your site — self-hosting without copying files by hand.
• Self-hosted files: download the ZIP with the WOFF2 files (the Latin and Latin Extended subsets by default, more if you tick them), a fonts.css with one @font-face rule per file, and the licence of each family. Each rule has a unicode-range, so browsers fetch only the files whose characters a page uses.

System font stacks need none of this: they name fonts that come with Windows, macOS, iOS, Android and Linux.

System font stacks

The serif, humanist, monospace and display stacks come from Modern Font Stacks (CC0). They cost nothing to load and render immediately, but each device shows its own font from the list — a book serif may be Charter on a Mac, Sitka Text or Cambria on Windows and Noto Serif on Android — so the notes say which one your device shows. Only regular and bold weights are offered for them, because other weights depend on the device.

Licences

Every library font is under the SIL Open Font License 1.1: you may use it on websites, in apps and in print, commercially too, and self-host it, as long as the licence and copyright stay with the font files (the ZIP includes them). You may not sell the fonts on their own. Fonts that declare a Reserved Font Name, such as Dancing Script, may not keep that name if you modify them.

Limitations

• The library has the families listed in the font menus — sans-serif, display and handwriting faces served from this site — plus system stacks; it is not the whole Google Fonts catalogue.
• System stacks look different on every device; the preview shows how they look on yours.
• The self-hosted ZIP contains the Fontsource builds of the fonts (WOFF2, by subset), not the original TTF files.
• Variable-width headings are available for Archivo only; other fonts are offered at their normal width.
• Without a connection, fonts and character sets your browser has not loaded from this site before cannot be previewed or put in the ZIP; the code still works.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.