Font Pairings Tool

Preview Google Fonts pairings in real website layouts. Choose your own fonts, or pick from one of Adam's top pairing picks, then grab the code to implement it.

Customize

Choose a heading and body font from the Google Fonts library.

Heading size

Body size
Preview As

Use this pairing

Add the link to your site's head, then apply the fonts with the CSS below.

Google Fonts link


        

CSS


        

Tip: for live sites, host the fonts locally instead of loading them from Google. It's faster and avoids sending visitor data to a third party.