Webfont Providers: A Rundown

This is the second part of a series of posts on webfonts.  See also Part I and Part III.

I previously wrote about how cool webfonts are.  But I didn't talk about the technical side - where they come from, how to get them.  When I was doing my own research, I couldn't find basic instructions on how to use webfonts.  Maybe that's because they're not hard to use, but I still think an introduction is useful.  So, here it is.

The traditional problem with using fonts on websites was that you could only use fonts that you knew the viewer would have on his own computer.  Webfonts solves that problem by storing the font on the server, and sending it to the viewer when he visits the website.  

That still leaves the question of how you're going to get the fonts into your web page.  The most popular method is to insert a little java script.  But I use Drupal, so I want something easy and elegant.  Enter @font-your-face, a popular module that integrates with the most popular webfont servers and dishes them up to you.  Most modern web pages are already using CSS for style control, but @font-your-face grabs the tags and overrides them for you.  There's a bit of a learning curve and almost no documentation, but once you get the hang of it, it's quite easy to use.

There are a good half dozen reputable sites that host webfonts, either commercially or for free (as in freedom, not free as in free beer).  Here's a brief rundown, followed by a side-by-side comparison.

Google Fonts

I've been suckling at Google's teat for a long time.  The more goodies they give me, the more I suckle.  So perhaps it's not a surprise that Google has gotten in on some sweet, sweet webfont action, and that it's free.  It's also elegant and easy to use.  It's the smallest offering of the group, with only 207 fonts, but they have a full-time curator and more are being added all the time.  I think part of the motivation for Google was to make Google Docs more robust.  Especially with the introduction of Chrome OS, people aren't going to be storing fonts on their hard drives any more.  It gives Google Docs a huge advantage to have a large repository of beautiful fonts available for easy use.

The cons are that it's almost too simple, but with such a small selection it's not hard to navigate.  And it integrates with @font-your-face module on Drupal.

More importantly, all fonts are free and there are no restrictions on how many website, hits per month, or anything else.

Fonts.com

This is the 1200-lb gorilla in the room.  Fonts.com gets credit for introducing me to webfonts in the first place; I visited their booth at the recent Web 2.0 Expo.  They have a library of 10,000 fonts, including some really obscure 18th- and 19th-century fonts that I couldn't find anywhere else.  They have a fantastic interface that makes it easy to navigate their plethora of fonts,  More importantly, they have great tools for using their fonts on your website, creating different collections for different sites, etc.  And they offer tight integration with @font-your-face on Drupal; they only send you the fonts you've designated for your project.  That's a huge benefit, because you don't end up with 3,000 fonts on your web server.  Also, if you designated CSS tags at Fonts.com, the module automatically picks that up for you, saving you extra work.

The cons are that it is very much a commercial service.  With the free account, you only get access to about a third of their fonts, although that's still 15 times more than Google will give you, and you can still use them on an unlimited number of websites.  They limit the traffic to 25,000 hits per month, although honestly if you've got more traffic than that, you can probably afford a paid account.  The biggest problem with the free account is that they make you display a Fonts.com banner that floats in the corner of your screen, so it's always visible, even when you're scrolling down the page.

However, $10/month gets you the entire library of 10,000 fonts, a quarter million hits per month, and no floating banner.  Pretty good deal for a commercial account.  They also have enterprise-level solutions if you're, like, Sony Corporation.

Typekit.com

Typekit is Font.com's rival.  They also offer a free account, but it's severely crippled, with only 150 fonts (fewer than Google), you're only allowed to use it on one website, 25,000 hits per month, and a floating badge in the corner.

The upside is their commercial account is a lot cheaper than Font.com's, at $4/month, unlimited websites, and no floating box.  It still only offers 564 fonts.  They also integrate with @font-your-face on Drupal.

The navigation is cramped and clumsy, and the paltry font selection makes it hardly seem worth it, even if it's less than half the cost of Fonts.com.

Kernest.com

This is a popular free webfont library, although I'm not sure why.  It is beautiful, and the non-commercial nature makes it simple and elegant.  They do have paid fonts, but the majority are free.  And, of course, it integrates with @font-your-face on Drupal.

The downside is navigation is difficult, scrolling is slow, sometimes fonts don't preview correctly, and I have no idea how many free or paid fonts actually exist on the site, although I think it's over 1,000.  All I know is that when I tried searching for specific fonts, they rarely showed up.  I'm not sure why this site is so popular, when there are better free sites out there.  For example . . .

Fontsquirrel.com

Fontsquirrel is dedicated to providing free, legal fonts with commercial-use licenses.  A lot of the "free" fonts on Kernest come with a license saying you can't make money off of the font, which means you can't use it on a commercial website.  All the fonts on Fontsquirrel are approved for commercial purposes.  They offer 654 fonts with no limitations on usage, traffic, floating banners, or anything else.  The site is very easy to navigate.  And, of course, it integrates with @font-your-face on Drupal.

Fontsquirrel is a fantastic resource and I highly recommend it.

Dafont.com

These last to entries aren't really webfont repositories, they're good old fashioned font libraries.  The fonts at dafont are mostly free.  They have 12,000 fonts available for download, with no limitations on hits per month or anything else.  The site has great navigation, and if you can't find a font you want there, they'll automatically check Fonts.com for you.  I appreciate that. A lot of the fonts are licensed for "personal use only," but they always have a link to the author so you can negotiate directly for a commercial license. They mostly carry novelty fonts, not fonts you'd want to use for magazine print, although most of their fonts are very high quality.  I found myself wanting to build websites around particular fonts.

This site doesn't integrate with @font-your-face, but the module does allow you to upload one custom font from your own computer.  (Apparently the one font limitation is a bug and the developer is working on it.)

This is a fantastic resource for people who want to work with beautiful, unusual fonts.

Font-zone.com

I'll be honest, I'm not sure how legal this site is.  They have a lot of fonts available for download that are offered as paid fonts elsewhere.  They have 4,270 fonts all told, and offer them all for free download, with no limitations on hits per month or anything else.  There's no search function, but you can browse by category or alphabetically, and I had no trouble finding the fonts I wanted.

As with dafont.com, font-zone doesn't integrate with @font-your-face, but the module does allow you to upload one custom font from your own computer.  (Apparently the one font limitation is a bug and the developer is working on it.)

Ultimately, I found a lot of fonts here that I couldn't find anywhere else (except Fonts.com).  I didn't see anything that was conclusively illegal, so I feel comfortable recommending this site for use.  On the flip side, they don't have any guarantees about legality, so if you want your web design to be bulletproof, go somewhere where they offer you a license (free or otherwise), like all the other sites on this list.

 The Rundown

As promised, here's a side-by-side comparison of all the services:

You may have noticed that all the webfont libraries integrate with @font-your-face.  I looked at other sites that don't, but none of them were very good (except dafont and font-zone).  I don't think that's a coincidence; the module is very well built and the developer has clearly done her homework.  The result is that webfonts on Drupal are even easier.

I mentioned that I had been looking for 18th- and 19th-century fonts; that will be the topic of my third post in this series.  Stay tuned.

J<

This is the second part of a series of posts on webfonts.  See also Part I and Part III.