Font pairing tool

Not by name. The tool loads fonts through the Google Fonts stylesheet service, so only families published there can be fetched. A font installed on your own computer would show if you typed its exact name, but only because your browser already has it, and nobody viewing your site would see it unless you host the files yourself.

Because that family has no 800 weight, so the browser fakes one by thickening the 400 or 700 letters. Families such as Gilda Display and Libre Bodoni ship only a few weights. Drop the heading weight to 700 or 400, or choose a family with a real heavy cut, such as Montserrat, Poppins or Big Shoulders Display.

It is the safest pattern, not the only one. Serif over sans gives each role an obvious job, which helps on posters and slides read from a distance. Two sans serifs can work when the weights or widths differ clearly, such as a condensed heading over a wide body. What rarely works is two faces that differ only slightly.

Two is the usual answer: one for headings and one for body text. A third font is sometimes added for numbers, code or captions, but each extra family is another download and another voice. On a slide deck or flyer, using weights and sizes of the same two families gives more variety than adding a third face.

It adds two font downloads per family used, one stylesheet request and the font files themselves. The preconnect lines let the browser open the connection early, and display swap shows fallback text while the fonts arrive. To trim it, remove weights you do not use from the link, since each weight is a separate file.