Google Webfonts that Don’t Suck

Webfonts services like Typekit are great, but for a lot of cases they’re just not practical.

For example, if you’re developing a WordPress theme, you can’t ask potential buyers to buy a monthly subscription, and you can’t bundle a font with the theme either unless it’s free.

For those cases, Google’s Webfonts service remains the only way to use non-standard fonts in your designs.

By the way, this post was inspired by Matthew Butterick’s own critical look at Google Web Fonts. Matthew makes some good points, but overall I still think Google Webfonts is a great initiative.

That being said, I can’t deny it’s fallen victim to its own success: the directory is now overrun with fonts of dubious quality, which means it can be hard to pick the right one. And Google Webfont’s own clumsy design doesn’t help.

Cramped typography and no breathing room makes for an ugly experience

To help you out, here are some questions to ask yourself when picking a font from a service like this:

Is the font right for the job? Some fonts are referred to as “workhorse fonts”, meaning they’ll do the job in any situation. Most Google fonts are not like this. Instead you get a lot of quirky, single-use fonts. Nothing wrong with that in itself, just make sure you use them appropriately.
Do you get the whole font family? A lot of fonts on Google Webfonts are only available in one weight (i.e. no italic or bold version), making them unsuitable for body copy (but headlines are usually no problem).
Is the font available for download? If you like to mock up sites in Photoshop first (or, as Robin points out in the comments, need to use the font for non-website materials as well), make sure the font can be downloaded somewhere as well. Fontsquirrel is usually a good place to check.
EDIT: You can actually download fonts straight from Google Webfonts (“use collection” and then “download collection” in the top right). So disregard this point!
Is the font overused? Once a font becomes popular on Google Webfont, you’ll see it popping up everywhere on the web (I’m looking at you, Lobster). It’s usually much preferable to use a font when it still feels fresh and original, especially for fonts with very distinctive characteristics.

And here’s a quick list of my personal favorites. And no, I’m not going to put up screenshots for each one. Just click on the damn links!

Sans-serif

I find that there’s a real lack of depth in Google Webfont’s sans-serif department. As far as I know, no font in there approaches the quality of a Gotham or Proxima Nova even remotely. Pretty much the only font that I’d use even if it wasn’t free is the awesome Ubuntu by Dalton Maag.

Update: since originally writing this article, Google has added a lot of great Sans-serif to the collection. Here are some suggestions:

Serif

To be honest, if I didn’t have access to premium fonts I’d probably stick to Georgia as far as serifs are concerned. Still, a couple typefaces are worth checking out:

Slab serif

Someone at Google must love slab serif fonts, because for some reason there are a ton of them on there, including some very nice families:

Script

I find that script fonts can get away with being a little lower quality than normal fonts. In some cases, their imperfections can even give them more personality.

I’ll be honest with you. From this list, the only two that I’ve used in real-life designs are Ubuntu and Arvo. I feel like Google Webfonts is a great initiative, but right now font quality is a far cry from paying services like Typekit.

I’m sure it will improve though, and I’m looking forward to seeing the fonts that come out in 2012!

Oh, and if I missed some of your favorite fonts let me know in the comments!

Google is also now encouraging people to fund new fonts on Kickstarter. I think that’s a great initiative and I’d link to it, except that whoever built Google Webfont’s awful site decided they were too good for plain own hyperlinks, and uses fancy JS pages that you can’t link to.

Update: here are two very nice sites that help you pick good Google Web Fonts:

SachaGreif.com