February 17, 2012

Moving to Hosted Font Services

Over the last couple months at Fuse we have been looking at ways to streamline our process and our products so of course my area of concern is trimming the fat from our theming process. There's a few ways we can do this but one of the major concerns is keeping our file sizes down within the theme. If we look at the majority of our work in the last few years we have already eliminated a lot of bulk by using fewer images for element that contain custom fonts. Generally we have been going with system fonts for large areas of copy and using @font-face to load custom type faces. This works great but it's a lot to serve up every page request. So for us the next step in the optimization process is looking at hosted font solutions. I've given quite a few a test run in a install of Drupal 7 to get an idea of what is offered.

The Current Front Runnners

The Numbers

  • Google Fonts - Free, 447+ Families
  • Fonts.com - Free with badge, 25,000 page views/month, 3000+ families. $110 a year, 250,000 page views/month, 20,000+ families
  • Typekit - Free with badge, 25,000 page views/month, 1 website, Limited to trial Library. $49.99 a year, 500,000 Page views/month, Unlimited sites, Full library (no numbers listed).
  • Font Deck - Priced per font average $7.50/year per site, 1m page views/month, 1000+ families.

Drupal Integration

All the services I mention above are supported by the @font-your-face module (http://drupal.org/project/fontyourface), I really hate the name but it's the best one out there at the moment. About a month ago i gave the module a test drive with a few of the services that offered trial accounts and had some mixed results. I was able to get fonts.com to work perfectly and it offered the best feature set of the bunch. Typekit gave me some grief and I ended up reverting the module to an older release that was supposed to work. This did not work out, apparently the uninstall didn't remove all of its database entries and what i was left with was some melding of the old and new module. This behavior has been documented by other users in the issue queue. All the other services seemed to work without a hitch so it's just Typekit that is iffy at the moment.

The actual config of the module is quite simple, It requires you to enter an API key or user id to begin importing your fonts. Once you have added the services you would like to use it will automatically add the required badge to your footer if you are using one of the trial or free accounts. For services like Typekit you will need to create your kit on the Typekit site and then load it through the module. Fonts.com on the other hand will allow you to browse through fonts from within your Drupal admin page and add new fonts to your site without ever having to visit fonts.com.

If you would like to host your own fonts the module also works great for loading your web ready font kits into Drupal.

The Verdict

After spending some time with the services i'd say my favourites were fonts.com and Typekit. Aside from the issues with Drupal integration both of these services offer a large amount of quality font families with excellent pricing. Although I had trouble with Typekit I don't think I'm ready to count them out just yet, the @font-your-face module is quite actively developed and should have a lot of the kinks ironed out in time.