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:

Filed under: 

8 Comments

I checked out your module a while ago and I am pretty impressed how awesome it has become in a matter of weeks. Great work and I am definitely going to play around with it.

Special props to your approach to this screencast.

Great, I've been using font faces from fontsquirrel for a while for drupal, but I used to use them the "static" way where I included them staticly through my themes/css.

great there is by now a module for that.

Thanks

Sorry don't see a video or link

Joe, I'm not sure why you're not seeing the video (maybe Flash blocker?), but I added a link in the post to the YouTube page (where it's also available as HTML5 video).

Hmmm...interesting sense of humor on this one. But a useful demo. I hadn't heard of Kernest or Font Squirrel, so thanks!

Hi guys, do you about problems between your module and Fckeditor? It seems that the editor changes on the CSS indicator textbox, cause a non function of the module. Is it true? Am I the problem? ^^ Thank you!

Hi Scott! Just a small update for the text above: Google already lists 140 fonts and new fonts are coming every day ;)

Very nice great drupal module

Add a comment

About the Author

Scott Reynen

Lead Developer

Scott has been working on the web for about 15 years, working in a variety of languages and platforms before finally settling on the LAMP stack. He is passionate about web standards, reusable code, and building community on the web. Scott deals primarily with the implementation phase of Aten's process, mostly focusing on server-side code, though he also enjoys JavaScript and is obsessed with semantic markup.

Read More Scott's Blog Posts