Flying Cars and Web Fonts

[1]For crying out loud. It's 2010! We should have flying cars [2] by now... or at least more than 10 fonts to choose from for web design. Well, it looks like maybe now we do.

If you have worked with websites for some time, or even just been online for a while you might have noticed that the text on many sites looks the same. If you are a web designer or developer you already know the reason - there is a very short list of fonts that are commonly installed on all computers with only a handful that make the cross over between PC and Mac.

If this is news to you and you are starting or doing website design or maintenance - take a minute to check out what's on the safe list at typetester.org [3]  As a bonus try out this tool that lets you test how a particular font will look at different sizes, line-heights etc. I have found it to be ridiculously handy and fun. For more statistical details on why those particular fonts are considered "safe" see this site [4]and it will become clear that we are rather limited in our font choices.

After years of cycling through frustration and acceptance on this issue, I went looking recently to see what's out there and am really encouraged by the progress that's been made. I found out about the new Google Font API [5]  and learned some things about older techniques since this isn't an area I know much about. I'm still not sure its time for fancy fonts on all web sites but if you have a special campaign or design need on your site its worth checking into your new options.

A couple caveats though - be sure you really do need something different because any of these methods can increase page load times and of course introduce another level of complexity to upkeep and risk of technical issues with your site. That said let's see what's new (ish) and cool.

@font-face

Along with some nice effects like text-shadow CSS3 standard includes a new rule for calling custom fonts, which is the starting point for most of the methods below. The idea wasn't new [6],  but its taken a while to take hold on a wider scale. As CSS3 is becoming widely implemented, more and more people are taking advantage of this feature.

Basically @font-face is a CSS technique that allows you to call a font from a web server to display on your site even if your visitor doesn't have it on their hard drive. You have to have a whole set of font file types for cross platform support, so services like Typekit  [7] (free + paid) which hosts the files for you, or FontSquirrel.com [8] (free) which offers handy multi file packaged downloads for custom fonts will help you pull it off.

For everything you ever wanted to know about the technique and more is in The Essential Guide to @font-face [9] . And here is a really innovative way to use that @font-face technique to include custom icons [10] in your site (plus a free icon font)- I'm kind of hoping this catches on.

Google's Font API

http://code.google.com/apis/webfonts/ [5]
A lot of people are excited about Google's foray into @font-face with their free API and with the speed and ease of use they bring to the table, I can see why.

Right now there are only 18 fonts plus some variations, but that's still more choices than we had before, and some of them are very nice. And they offer some really easy to follow instructions for anyone with a bit of HTML/CSS knowledge. Unfortunately they don't include SVG, the font format needed for most mobiles, so you will need to plan ahead for a standard alternative. DesignShack has a nice tutorial [11] that expands on Google's instructions.

More on web fonts that might be of interest.

Since I haven't ventured into this area before the Google API led to a lot of new information for me.

For instance I found a great technical round up [12]of the various javascript techniques for including non standard fonts. It covers the pros and cons of 4 javascript based alternatives : siFR [13] (flash text replacement), FLIR  [14] (PHP Image Replacement -$12/yr), Cufon and Typeface.js [15].  Unfortunately with these techniques you can no longer select the text, which is a big drawback for me.  And there is an even broader overview [16] here. I checked out a comparison of the two popular services, Typekit and FontSquirre [17]l, mentioned above, both of which seem like viable options.

So maybe it is time for some limited experiments in pulling in new, sexier fonts. But since there are still adoption issues and limited mobile support for @font-face, it will need to be with a well executed css font stack for a graceful degradation of course. Or maybe we still have to wait a bit for fonts on the web to catch up with our hopes and dreams. And definitely for safe and affordable flying cars [18].

So far I have experimented but not used Google or any of the rest on a live site - have you? Leave your experiences in the comments.