A List Of Sites To Help Choose Google Fonts

Google Fonts contains a huge library of free web fonts you can use on your site, but choosing a good combination of headline and body fonts is not easy (on this site I’m using Oswald for the headings and Lora for the body text).

Here are some sites that make the job easier:

Font Pair
This is a very handy pairing of headline/body fonts because it’s broken down by Serif/Serif, Serif/Sans-Serif, Sans-Serif/Serif, and Sans-Serif/Sans-Serif – and the examples are long enough to give you a good idea of how things look, but short enough that you’re not scrolling forever.

HAND-PICKED TALES from ÆSOP’S FABLES with HAND-PICKED TYPE from GOOGLE FONTS
What I love about this site is that it creates individual “pages” to show off each font combination – and they’re truly inspired designs.

Typecast – Google Preview
This powerful tool lets you play with all the elements on a page of text, using a friendly interface. The page of text features several common elements, like headlines, sub-headings, author bylines, pullquotes, and more, so you can test them together in real-time.

Typ.io – Google Library
Shows screenshots of actual sites and lists what fonts were used. While the site covers many font libraries, you can filter for only Google Fonts, which is what I’m linking to here.

FontCDN
Features a variation of the search engine used on Google Fonts, but easier to use in some ways, including a filter that shows suggested fonts for headings and for paragraphs.

Type A
This is a short collection of what the author considers to be the best Google Fonts for use with responsive design. Doesn’t show headline/body combinations, but does show each font with H1, H2, H3, and body text.