Dynamic Web fonts: A long way from HTML 1.0

We've come a long way since I first started coding Web pages in 1994. If you read this post on my blog -- not on Facebook, Google Reader, etc. -- and use a modern Web browser, the first five words of this post are rendered in a font that probably is nowhere to be found on your computer.

If you're curious, it's called Lobster, by Pablo Impallari. It's probably a very fine font for the logo of a 1950s-style drive-in restaurant with roller skaters delivering your food to your car. Let's hope it doesn't get overused. And if you look at this page a year from now, I can't promise I'll still be displaying it here. Things change.

When I first created the Web pages for an online news prototype at the Star Tribune, you couldn't select fonts that were on the computer, much less refer to fonts that didn't exist. Users could select fonts (and colors, and backgrounds) but web page creators had nothing to say about it. The first pages I created on a Macintosh didn't even have tables for layout, much less stylesheets. Over the years we've slowly gained functionality -- smarter markup, stylesheets separated from the page, scripting that converts Web pages into applications, and finally dynamically downloaded fonts.

I'm prompted to write this post by the appearance today of Times Cheltenham on the opinion page of the New York Times website. The screen shot here shows "The Opinion Pages" in Cheltenham, but that's no great feat, because it's actually a graphic on the webpage.

But the headline below it -- "What I Didn't Find in Africa" -- is the first Web appearance of Times Cheltenham (a proprietary NYT font) in actual Web content. Previously, that headline would have been rendered in Georgia, which is a fine font, but not the same face as the Gray Lady uses in her daily print.

Technically, the way this works is an extra bit of HTML in the document head section tells the Web browser where to download a font. Once it's downloaded, you can refer to it using conventional CSS font-family instructions. If you have a license from the font foundry, you can host the font yourself. The Times is using a company called Typekit, which offers many commercial fonts.

In my case, I used a free service from Google and added a Drupal module to handle the details. 

I should be delighted that Web browsers are getting more powerful and that we now have reliable support of arbitrary fonts in Web pages.

But there's a cloud in every silver lining. This adds one more opportunity for something to break -- to hang a browser, to hold a connection open. It adds weight to pages, which already seem to be at war with our computer resources. And it's yet another way for people who love print to make the grievous error of thinking the Web is just another distribution channel.

We all know the adage, "Just because you can, doesn't mean you should." Let's hope these dynamically loaded fonts are used wisely and sparingly. There are a lot of fonts in the virtual type case. Many of them should stay there.