The coming @font-face storm

Will font foundries become the next RIAA?

The field of typography for the Web has been changing quietly over the past 15 years, and it’s about to take a dramatic twist.

I can remember online typography being an issue since I first accessed the World Wide Web in 1993. Actually, I had been working in Cambridge for a major publisher for years on one of the “walled gardens” that predated the public Web. Ironically enough, it offered better typography than is generally seen on the Internet today.

The tyranny of Verdana

Since the inception of the web, fonts have been particularly challenging to deal with, as they have traditionally run at the level of the operating system. If you were to download a poorly crafted font, your system would crash or – worse still – become victim to malware.

For that reason, most designers came to adopt the system fonts that came with the Windows and Mac operating systems as the sum of entire typographic universe. This universe excluded every proprietary font, even those distributed with popular software such as Microsoft Office or Adobe Acrobat. You can count these fonts on two hands, and most designers could rattle them off, even in a drunken stupor: “Arial, Georgia, Helvetica, Verdana, Times New Roman…”

Alternatives to fonts

Tired of the same old fonts? Just replace them! For years, the web designers actually replace text with images of the same text, set in a beautiful font. However, this dirty little practice tended to bloat web pages with requests for images and make them inaccessible to screen readers.

More elaborate techniques such as sIFR and Cufón followed, combining javascript and Flash to cover tired web fonts with fresher, more handsome alternatives. You still had the original text underneath, making them accessible and standards compliant. Unfortunately, both sIFR and Cufón had their own limitations, such as showing a flicker of the web font before covering it up with the desired typeface.

Letting the @font-face genie out of the bottle

Since the CSS3 spec was introduced late 1990’s, there’s been a wonderful standard for embedding fonts into browsers, but it never caught on. Until a few months ago, @font-face failed to achieve a critical mass of browsers that would support it.

Here’s how it works: Instead of installing a font on your operating system, @font-face allows you to embed fonts with the web page using common, trusted formats (TrueType, OpenType) that don’t carry a risk to your entire computer. You place the font on your web server and call it up through your style sheet using a straightforward @font-face declaration, as in this example:

@font-face {
font-family: MyriadPro;
font-style: normal;
src: url(../fonts/MyriadPro-Regular.otf);
}


Then, you call up your font as you would any other system font:

h1 {
font-family: MyriadPro, Frutiger, "Lucida Sans Unicode", Helvetica, sans-serif;
}

Using these two snippets of code, your top-level headlines would appear in the proprietary Adobe typeface, Myriad Pro. In fact, your browser would download a pristine original copy of the OpenType file MyriadPro-Regular.otf that works on just about every single operating system.

For a type foundry like Adobe, this is serious reason for concern: just like MP3 files threatened to undermine the recording industry, @font-face poses an even more serious threat. The fonts are distributed by your browser, whether you know it or not. Unlike BitTorrent and the old Napster, where you opt in to conduct file sharing, you’re downloading fonts quietly in the background.

Ever mindful of intellectual property, Microsoft took a different approach. Sure, you could embed Myriad Pro in your web page, but you’d have to cripple its use beyond the browser. To display embedded fonts in Internet Explorer, you need to download its free Web Embedding Fonts Tool (WEFT). You’d then run an OpenType font through the WEFT meat grinder, and a rights-protected .eot (Embedded OpenType) file would come out the other end.

The coming “cease and desist” letters

If you’re looking to embed a font issued by a respectable type house, you’re in for hours of fruitless research. Virtually none of the type houses – major foundries and independents alike – have clear policies and pricing for embedding fonts on the Web.

I used MyriadPro as a font example because it’s distributed freely with every copy of the Adobe Reader (formerly known as Acrobat). Does that mean that Adobe wouldn’t mind me embedding the font in a client’s site? There’s no way of knowing. However, Adobe (and every other type foundry) don’t post any mention of @font-face or embedding web fonts anywhere.

I think it’s more likely that type houses will follow the example of the recording industry. Rather than set clear guidelines, they’ll completely ignore the spread of this technology (even though it’s been around since 1997), and then sue for copyright infringement.

The future of Web typography

There’s a shimmer of hope on the horizon: open source typography. Just as type houses are clinging to an old-school approach to intellectual property, we now see a newly-sprouted group of typographers adopting the practices of the open source software community.

The combination of @font-face embedding and open-source typography is a powerful one, and will be the subject of my next post.