Font Pairing Tool

Pairings that contrast in style but match in proportions — a serif heading with a sans-serif body, or two sans-serifs with clearly different personalities. Well-known examples include Playfair Display with Source Sans 3, Merriweather with Open Sans, Lora with Roboto, and superfamilies designed to work together such as PT Serif with PT Sans or IBM Plex Sans with IBM Plex Mono. This tool has 39 curated pairings in five styles, plus 150 families to combine yourself.

Copy the tags into your page's : two preconnect hints and one stylesheet link to fonts.googleapis.com/css2 listing only your families and weights. Then copy the font-family CSS (or the Tailwind v4 @theme block) so your headings and body text use them. The @import line is an alternative to the link tags if you can only edit CSS.

It sets font-display: swap for the downloaded fonts, so the browser shows your text straight away in a fallback font and swaps in the web font when it arrives, instead of hiding the text while it loads. That's why the exported font-family rules include a fallback stack after each font name.

The visitor's browser downloads the CSS and font files from fonts.googleapis.com and fonts.gstatic.com, so Google receives the visitor's IP address and the request's HTTP headers — including the user agent (browser and operating system) and usually the referring page. Google's Google Fonts FAQ says the API doesn't set cookies and that the data isn't used to build profiles or for targeted ads. This tool asks first: nothing is requested from Google until you press “Load font previews”, then only the families you preview are requested, and nothing you type is sent. The link tags you export have the same effect for your own site's visitors.

It depends on how you use it, and this isn't legal advice. In January 2022 the Munich Regional Court (LG München I, 3 O 17493/20) found that a site which loaded Google Fonts from Google's servers without consent had unlawfully passed a visitor's IP address to Google. The privacy-friendly alternative is to self-host: download the font files from the family's page on fonts.google.com or install them from Fontsource (for example npm install @fontsource-variable/inter), serve them from your own domain with @font-face, and keep the same font-family CSS.

As few as you use. Two families is plenty for most sites, and each extra weight or italic can mean another file to download. A common set is one heading weight, a regular body weight and a bold for emphasis — which is what the export requests by default. Tick italics only if your content uses them.

The families in this tool are all open-source fonts from Google Fonts — most under the SIL Open Font License, some under the Apache License — which allow commercial use, embedding and self-hosting. Check the license shown on each family's Google Fonts page if you plan to modify or redistribute the font files themselves.