Using Custom Fonts on the Web – A Brief History

We’ve come a long way since the days of the old <font> tag (thank goodness), and now the standard “web fonts”–those that can reasonably be expected to be installed on most machines, plus a list of fall-back options–are becoming increasingly anachronistic.

I just installed this instance of WordPress, and with just two lines of code I was able to change the blog and post titles to display in a  fancy sans-serif font I’ve never even heard of before: “Terminal Dosis Light” was designed by Edgar Tolentino and Pablo Impallari.

This was made possible by the magic of Google Web Fonts, which recently rolled out a very nice update. Oh, Google, where were you five or six years ago when all my freelance clients wanted custom typography all over their sites? Oh yeah, you were busy being a search engine.

Let’s take a look back at how we went from the font tag, through some creative workarounds, and finally back to today’s simple standards-based solutions.

Some Imaginative, Clunky Workarounds

Back in 2003, we had to use Fahrner Image Replacement, which entailed hand-coding background images to replace HTML text that we wanted to appear in a swanky font. This was a pain, and made updating text a maintenance nightmare–but the benefit of having text that was still accessible to search engines and screen readers alike was a major improvement over straight image-based text.

A few months later, in 2004 Stewart Rosenberger over at the stalwart A List Apart suggested that PHP’s ability to draw TrueType text into custom images on the fly could be combined with a touch of javascript to get essentially the same image replacement effect, except this time it would be Dynamic Image Replacement. Thank goodness Stewart thought of this–though I am sure it has haunted him since. By this point we were all giving our clients web Content Management Systems (CMSs – oh, WebSite Baker and your elusive version 3.0!) so that they could update their own sites whenever they pleased–not possible when every heading had to be laboriously custom-coded.

But what if you didn’t have the ability to install the necessary image-generating PHP script or your desired font wasn’t available in the proper format? What is you had fallen for that inescapable temptress, Flash? Well, then you didn’t have to rely on server-side tricks, you could replace your clunky old Times New Roman with a Flash-based rendering of Caslon or what have you. Shaun Inman is the fellow to thank for the rise of Inman Flash Replacement.

This technique was developed by many others into sIFR (Scalable Inman Flash Replacement), which saved my bacon on more than one occasion when the client’s server did not permit custom PHP or other scripting. Ugh, post-fin de siècle IIS hosting!

Using Web Standards – At Last!

Recently, with the canvas element of of HTML gaining widespread support across most major browsers–IE, we’re ALL looking at you–it has been possible to make the browser render non-standard fonts using javascript instead of a plugin like flash or images generated by PHP. Cufón was one of the first successful attempts, and while it retained the accessibility benefits of the original Fahrner Image Replacement, it suffered from the inability to select text. Plus, it printed all funky and font licensing was a real issue. It’s still in use on several of my sites, but plans are in the works to migrate away from this trendsetter.

More successful is the really fantastic TypeKit, which is a bit like a paid version of Cufón, except they handle the licensing, deliver the necessary scripts over a high-speed Content Deliver Network (CDN), and it just plain works better. Interestingly, the founder of WordPress (which runs this blog), Matt Mullenweg, is also one of the main forces behind TypeKit, which certainly bodes well for its future. His blog, by the way, has the coolest URL ever: http://ma.tt

I’m just getting started on this blog, and I haven’t taken the time to really peruse the library of available typefaces at Google Web Fonts, so who knows, I may eventually switch this site to use TypeKit instead, as I understand their library is more extensive. Although they offer a free version, it also adds a little link in the corner of your site, which I’m not a fan of–look I’m linking them in any case already–I may shell out a few buck a year, depending on whtehr or not I keep blogging.

Leave a Reply

Your email address will not be published. Required fields are marked *