Fonts in Drupal with @font-your-face

@font-your-face logo

Have you heard of web fonts? They're the next big thing. Well, they were the next big thing back in 2007. They're more the current big thing now. A lot of the recent excitement around web fonts comes from Google's recently announced font directory, but Google was actually pretty late to the game. Readily available web fonts have been around and gradually expanding for years now.

What Google did was make a few web fonts incredibly easy to use. So easy that Baris Wanschers only needed 1 day to get Google Fonts working in Drupal. But as great as that is, Google's font library is still rather limited with less than 20 font families. Sites like TypeKit, Font Squirrel, and KERNEST provide hundreds of font families each. But it's a little more trouble to use these fonts because the services don't have APIs like Google.

Without full APIs, even the best interface from a font provider requires us to use two interfaces to get fonts working: one on the provider site and one on our own site. If only all of these font providers all had APIs, we could pull them all into Drupal and use a standard interface to apply a wide variety of fonts to our designs without needing to hunt down who offers which fonts and deal with the a slightly different system at every provider. That's the idea behind @font-your-face: a common interface for dealing with fonts from all over the web in Drupal.

Of course, this will only work if font providers provide useful APIs for @font-your-face to use. Fortunately, font providers are awesome. Out of the 4 font providers I've contacted about APIs, 2 have already created brand new APIs for use in @font-your-face, with the other 2 in progress. Thanks to the help of Garrick Van Buren from KERNEST and Ethan Dunham from Font Squirrel, over 700 fonts can now be quickly and easily used in Drupal, as well as any other system that works with the new APIs.

If the font providers I haven't yet contacted are this helpful, @font-your-face should soon provide a unified interface for browsing and enabling nearly every font on the web in Drupal. If you're still using Arial or Georgia on every Drupal site you build, well, you can do that with @font-your-face too, but now is a great time to expand your typographic toolkit.

Here's a video demonstrating how easy it is now to work with fonts in Drupal:

Design Drupal Planet

Read This Next