Arial, Verdana, Georgia, Times New Roman, Courier New, Impact, Trebuchet and <shudder>Comic Sans</shudder>. Those are the basic web-safe fonts we’ve all been using for the majority of our text-based content since the dawn of time. Or at least, since the Web came along. If you wanted something “fancier” for your text, you had to use an image, Flash, or something equally funky.
But we’re not shackled anymore. This is The Future™
M’colleague Zach, recently posted his own take on Web fonts, but I wanted to go down a slightly different track. So before we get into the nitty-gritty, I should point out something. Historically, Internet Explorer has been the fuel of nightmares for a lot of web designers and developers. Its support for even the most basic of web standards was – until relatively recently – pretty woeful. In recent years, the IE team have done a lot to mend fences with the web community, and IE10 looks set to be a very solid browser.
Having said all that, IE got it right with regard to web fonts years ago! Everyone else was lagging behind. Yep. IE has had support for custom web fonts built in since IE4. I’ll wait for the gasps of astonishment to subside…
Now, that implementation wasn’t without its problems (specifically surrounding licensing of the fonts themselves), but it was a step down the road, one that other browser manufacturers wouldn’t even attempt for at least 6 years. Now, the concept of font downloading has been included in the W3C’s CSS3 Fonts Module, turning what was once a proprietary implementation into a formal guideline and (eventually) a recommendation.
Support for custom web fonts is pretty universal. IE has been solid for years. Firefox since version 3.5 (as of this writing, Firefox is currently at version 17), Safari since version 3.1 (currently at version 6), and Opera since version 10 (currently at version 12). Chrome uses the same WebKit rendering engine as Safari, so its support is solid, and has been for a long time. So we’ve got browser support covered. Great! Now on to licensing…
Working with the foundries
Fonts are licensed, just like photos. And the terms of those licenses vary from font foundry to font foundry. Some have embraced the revolution of web typography, while others are – understandably – concerned about illegal redistribution of the fonts that have been licensed by the site owner. After all, the fonts themselves are raw, unencrypted, and are downloaded to every user’s computer in their browser cache folder for ludicrously easy installation and dissemination.
This lack of protection for font files slowed down usage of custom fonts for a while, until some ingenious folks set up the missing link in the picture: A font hosting service. Typekit is one such service (there are others), which offer the convenience of easy-to-install custom web fonts, with the security that helps the font foundries sleep at night. In essence, you sign up for an account with Typekit (there are various levels, one of which is free), copy and paste a couple of lines of JavaScript into your website source code, and then choose the fonts you want. When you’ve done that, you write the necessary CSS (which is typically just including the name of the custom font into a font:family declaration) and your chosen font magically appears wherever you decided you wanted it! Easy.
Typekit and its brethren offer a vast array of fonts, from some of the major foundries. Using these services means you can be certain the fonts you’ve chosen are licensed appropriately, and can’t be easily pirated. And now Typekit has been bought by Adobe, the choice of fonts at that particular service is only going to increase. So designers! The next time you want Garamond Premier Pro for your headlines and Myriad Pro Condensed for your body copy, you can!
The future
In the middle of last year a new trend started to emerge: Icon fonts. With the rise of responsive design, and designing for retina, techniques for providing crystal clear graphics at all resolutions is becoming ever-more important. An icon font can certainly help in that endeavor.
Symbolset is a great example of an icon font. Instead of having to create a whole load of icons in a graphics program, why not upload one custom font to your website and use that instead? It’s resolution-independent, and changing the color of your icons is as simple as altering the text color in your CSS. You really can’t get much easier than that.
