News Bulletin: The Internet Says Hello to Typography

Will it be love at first sight or a bitter, bitter marriage with no possibility of divorce?

Pandora’s little black box is about to be opened. Soon, very soon, most common browsers will support the @font-face CSS directive. Web designers will have at their disposal any TrueType or OpenType font that legally allows for web embedding. What does that mean to you? Well, brace yourself for a web full of unreadable, kooky typefaces, messy grunge fonts, and lots and lots of imitation handwriting.

And that’s not all. Designers will want to use commercial fonts that are meticulously designed with readability and balance in mind. Unfortunately, because the directive requires that the font file be downloaded by the client machine (and therefore accessible to anyone on the web), the use of said fonts will constitute a legal violation. So the fonts we hate will be given free reign while the fonts we love will remain private treasures.

That having been said, there is a bright side. I have a few predictions: Reputed foundries will release free, limited web-versions of their commercial fonts. The prolific use of hideous typefaces will only make the good ones shine a little brighter. Web designers will be forced to learn more than a handful of fonts. Typography’s value will be clearer, and interest and appreciation of it will rise.

OK, want a taste of what it will look like? This post is an experiment—it uses @font-face—so all you have to do is load it in a browser with @font-face support (see link below for more info) and you can behold the wonder that is font embedding. My apologies if this post is a poorly executed example and hard to read (welcome to the future, friend). I only wanted to experiment and learn, which leads me to my next point.

I have two potential concerns for the practical use of @font-face:

One. While testing @font-face on this page, I noticed that some fonts just didn’t work. On top of that, fonts that worked in Firefox 3.5b didn’t work in Opera 10a. If anyone knows what’s going on here, please enlighten me. I realize that I’m working with alpha & beta versions of those browsers, so maybe this is an issue that will work itself out in due time.

Two. As usual, IE somehow manages to be both ahead of and behind the curve. While IE has supported @font-face since IE 4 (yeah, seriously!), they only support a font format called EOT (Embedded Open Type) that they created and no one uses. Naturally, being Microsoft, they decided to make the font conversion process a huge pain, which might just explain why no one uses it (hmmm…). IE’s lack of support for TrueType or OpenType is very troubling and can’t be ignored, but no one is going to torture themselves by using IE’s conversion tool unless the process is more streamlined. Solution: As usual, the rest of the world waits for IE to catch up.

All concerns and nay-saying aside, I really am very optimistic about the future of typography on the web. If you’re a web designer or developer, take some time to play around with @font-face! Here are a few links to get you started:

My hat goes off to Webfonts.info for being an extremely useful resource. Be sure to check out their list of commercial foundries which allow @font-face embedding. I expect that list to grow very quickly in the near future.

A nice summary of supported browsers & browser versions

A list of fonts available for @font-face embedding

Jon Tan has a detailed article on how to make @font-face work in IE