Goodbye Google Fonts, hello @font-your-face!
For years it was a struggle to implement non-default fonts in your website. And as a result, many websites still use Verdana or Arial as their default font. Designers were limited to use the 13 or so web safe fonts. And for years, we needed several difficult techniques to add those stylish fonts: either using a script that generates images (createfont.php?string=Mytext) or with font replacement solutions like sIFR, Cufón, FLIR or Typeface.js.
Many of these solutions had downsides: you can’t select the text, it does not work without JavaScript, it isn’t accessible, etc. But that was then. Since a while it is possible to use @font-face definitions in your website to use font files (.ttf, .otf, .eot) that exist on the webserver. The cool thing about @font-face is that it works on all browsers (yes, even IE6!), that it doesn’t rely on JavaScript and that it is fully accessible. Plus that you can use literally thousands of online hosted fonts, free or paid.
Google Web Fonts
When Google released their Font API in May 2010, it took me less than a day to release a Drupal module that enables web developers to use Google Fonts on their website without programming. And in the following months, I’ve spent quite some time to improve it and to keep the font list up-to-date. A year after releasing the module, the team at Google contacted me. They wanted me to know that they were working on an API service that can be used to fetch the whole list of available fonts and they asked for my input and to test it. I’ve implemented their API a few weeks later. Which was a great thing, because this saved me from having to update the module almost weekly as new fonts were now released almost every day. At this time, over 5000 Drupal sites are using the module.
And then there was @font-your-face!
A while after I’ve released the Google Fonts module, Scott Reynen (sreynen) contacted me to ask if I were interested in joining him on his @font-your-face module. His vision was to have one font module that implemented all avaliable font libraries. At the time, the module did not impress me and I didn’t see the need to use one container module for several font providers. But that has changed.
During DrupalCon London I met Jason Pamental (jpamental) who gave a great talk about Web Fonts. We spoke about the Google Font module and he connected me the Ed Platz, Engineering Manager at Monotype. Ed asked me to help on the @font-your-face module to make it load the Google Fonts dynamically, just as I did with the Google Fonts module. He even offered me to pay me for my work. An offer I couldn’t refuse and so I decided to give @font-your-face another try.
And boy, what was I wrong the first time. The module actually turned out into a great, user-friendly solution to implement thousands of fonts from 7 font providers. It does not only supports Google Fonts, but also Typekit, Font Squirrel, KERNEST, Fontdeck and Fonts.com. It even supports adding your own Fonts!
The admin interface of @font-your-face
Enabling fonts in the admin interface
A long story short...
I decided to stop working on the Google Fonts module and join Scott in making @font-your-face the one-stop solution for integrating Web Fonts in Drupal. I became a co-maintainer and implemented some new features:
- Make Google Fonts load dynamically
- Add fonts using the THEMENAME.info file
- Make fonts exportable with Features
- And some more minor improvements
So if you happen to use the Google Fonts module on one of your sites, please try out @font-your-face (the 7.x-2.x version) and let me know what you think in the comments. You won’t regret it ;)
Tags: