The (sad) state of web fonts embedding

A bit of history

In case you think embedding fonts in web pages is something new, I made the first font embedding experiments in browsers in 1998. It was working – cross-browser too: Internet Explorer 4 and Netscape Navigator 4. See, EOT from Microsoft is quite old (introduced in 1996) and Netscape had their own format, called .pfr, based on the TrueDoc technology developed by Bitstream. So how comes that more than a decade later we still don’t have a fully working way of using custom fonts on the web?

EOT and TrueDoc were ahead of their times. When CSS was a mess and designers were struggling to get similar (not even identical) results across browsers, when for most people content was delivered over a 56Kbps modem, web fonts were a distraction. As a side-note, this is also the reason for the wild success of Flash: it was the right technology at the right time, offering consistent look & feel across browsers and platforms, layout, sound, interactivity and embedded fonts that “just work”, all deliverable at a small size, streaming. Then Netscape failed and designers – always wary of Microsoft – largely ignored EOT. Microsoft itself didn’t push it, and their WEFT (Web Embedding Fonts Tool) for converting TTF/OTF fonts to EOT was a nightmare.

For ten years, designers have relied mostly on images and Flash to display custom typography and “web-safe fonts” for all text. Then various flash/image-replacement hacks were created, in a desperate attempt to move things forward. With the introduction of @font-face CSS definition, things seemed to move forward, but we’re still away from a real, working solution. Why? Financial interests, ideologies and ego.

OTF vs EOT

Developers from Opera (the CTO and activist Håkon Wium Lie) and Mozilla wanted to push open formats, arguing for direct support of TrueType/OpenType in browsers. This is a very noble idea, but there’s a problem: all commercial type foundries were against it; quite understandable I might say, as TTF/OTF support via @font-face is not really embedding but linking – a very important distinction (technically the TTF can be base64-encoded in the CSS file but it doesn’t change things from a legal standpoint).

Font linking via @font-face works by writing in CSS something like this:

@font-face {
  font-family: 'MyHeadingFont';
  src:  url('some_font_file.ttf') format('truetype');
}

h1 { font-family: MyHeadingFont, Arial, sans-serif}

As you can see, the font source is freely available. Lets say Apple.com uses Myriad Pro. There’s nothing stopping me from downloading it and installing on my machine, or – even worse – to hotlink from my own CSS to the font on their server; it might even be legal. People do it with images all the time. Obviously, font foundries don’t want their fonts to be used and distributed like that. They are also not stupid; they know DRM doesn’t work and that everything can be cracked; they just want a minimal level of obfuscation around a font so it can’t be just downloaded and installed and some sort of domain restriction, so ideally fonts can’t be hotlinked. People would have to willfully “crack” the font, making infringement a clear case. Considering that a really good font family like Helvetica Neue, Myriad Pro or Frutiger takes years to design and polish with hinting, kerning, ligatures and all sorts of details, I can see their point.

Håkon and other developers have pointed to the thousands of free fonts available on the web. I can see their point of view too, but as a designer I have to say that unfortunately most free fonts are rather poor. Even “above-average” free fonts tend to have issues at small sizes and very few are usable as body text on screen (Hinting is hard and tedious; I worked on a simple dingbat font once and I know) and the best free fonts like Bitstream Vera or Droid are made by true professionals.

Beside objections from companies like Bitstream, Linotype or Adobe, linking to the font itself is often impractical anyway: a good OTF font will include Latin, Greek, Cyrillic glyphs and maybe even more. Why should they be included if the site is in a western language only?

Of course, EOT had all these questions answered by 1996. It offered subsetting, restricting to specific domain(s) and great compression, but no other browser wanted it.

So now we have two competing ways of using fonts on the web, EOT, which is backed by Microsoft, Adobe and type foundries and OTF/TTF linking, backed by Mozilla, Opera and Apple. Think of it as the HTML5 video format debates (MPEG4 vs. Ogg Theora).

Workarounds

There have been several attempts to overcome technical and legal limitations of font embedding, by the way of various “replacement” techniques:

• image replacement on server (for example using PHP) to automatically generate images for texts to be used as headings;
• flash replacement (the famous sIFR that uses flash with an embedded font to display the text);
• more recently Cufón that uses javascript canvas/vml to draw the text.

They all have various issues and don’t really address the base problems. Image replacement is inefficient. sIFR requires flash and javascript and is tedious to set up. Cufón requires javascript and text can’t be selected or if you can select, you can’t actually see the selection.

All these hacks are wonderful in terms of technology, created by very bright and dedicated people, but in the end they are just hacks. You can’t really use either of them to display anything more than a heading, button or pull quote. I think Cufón is the most advanced solution we have for now in some cases, it allows for consistent rendering across platforms and browsers and allows even the fonts with poor/missing hinting to be readable at small sizes. Neither Cufón or sIFR or other similar solutions (except for the image replacement) address the legal issues. NB: while it’s perfectly legal to embed a commercial font in a flash file, the swf file used by sIFR has the same legal issues as Cufón or direct linking.

WOFF to the rescue

There’s still hope. WOFF (formerly .webfont) is a new proposed (fall 2009) format from two type designers, Erik van Blokland and Tal Leming and it’s supported in the upcoming Firefox 3.6. WOFF is backed by most type foundries and has the potential to become a standard in near future. Still, it’s difficult to say exactly what will happen and when.

Web Font support now

So here’s the current font format support for each browser:

So for now, if you want wide cross-browser support, you must:

• find a free font whose license allows you to freely use it on the web;
• produce EOT, WOFF and SVG variants of it
• test it on all browsers on Windows with and without ClearType enabled and on Mac and hope it looks decent.

@font-face {
    font-family: "Your typeface";
    src: url("filename.eot");
    src: local("Postscript name"), local("FontName"),
    url("filename.woff") format("woff"),
    url("filename.otf") format("opentype"),
    url("filename.svg#filename") format("svg");
}

(read here what it all means – local is used mainly to confuse IE and the double local definition is for Safari on OSX – include the full name and the Postscript name)

You can also grab some free fonts (or generate the EOT yourself from a free OTF/TTF) using the excellent FontSquirrel service.

Be very careful with testing the fonts! Here’s how the embedded font might look on different systems:

Embedded font on Mac OSX	Embedded font on Windows 7	No embedded font on Windows, substituted with Georgia

I took the screenshot above from a typographic site that uses TypeKit to get two fonts – Le Monde Courrier and Angie Sans. I really hope their core audience is Mac-only, because the text looks absolutely horrible on Windows. Mac OSX has a different font rendering technology and does not use font hinting. On Windows, properly-hinted fonts tend to look crisper and more readable especially when ClearType is turned on, but an unhinted font is almost unusable.

Legal woes

Traditionally, fonts came with one of the 4 embedding rights:

• Restricted (no embedding allowed);
• Print&Preview (embedding allowed in read-only docs, like PDFs);
• Editable (embedding allowed in editable documents) and
• Installable (free to permanently install on the user’s systems).

Also traditionally, if you wanted to use a font for commercial web services (for example to create printable greeting cards online) you had to purchase an extended license for the fonts you wanted to use in the application. The extended license is often paid yearly and depends on things like number of visitors and number of CPUs on the server.

The lack of a common standard prevents the font companies from having a clear policy on selling web-embdeddable fonts.

AscenderFonts offers a “Web Fonts License” for EOT fonts but requires an extended license for linking to the OTF:

The font files cannot be modified, posted to websites or further distributed without an extended license. Nor can the fonts be copied or installed onto a file server or web server without an extended license

Monotype states that

Monotype Imaging has introduced a new EULA that permits fonts to be used in the Embedded OpenType® (EOT) format for Web embedding and for non-commercial purposes. Products from the Monotype, Monotype Imaging, ITC, Linotype and Image Club foundries are covered by this agreement

Interestingly, fonts purchased before this new EULA are not permitted to be converted to EOT, they must be purchased again.

Adobe has a permissive license (Editable Embedding) for their Adobe Originals fonts (included with the Creative Suite family of products), which are said to be safe to be used with Cufón/sIFR.

To make things worse, we have many variants of the same fonts. Consider one of my favourites – Zapf Humanist. It’s also known as Optima and also available as CG Omega. CG Omega from SwiftView is a free download but only if you use their tools and it does not allow any embedding. Another CG Omega variant from HP is also free with Editable embedding and there’s also an identical-looking font called MGOpen Cosmetica, free with installable license. As if this wasn’t confusing enough, fonts from The League of Movable Type are free and open-source, but the font details describes the embedding flag as Print&Preview only.

What’s with this mess? I shouldn’t need a law degree to deal with all of this! I want to be able to choose a font, select a “for the web” option and pay a clearly stated one-time fee. I don’t want extended licenses, I want to know how much it’s going to cost upfront. I also expect to be able to convert my existing fonts to EOT/WOFF or whatever the standard will be. A font is a font. What does it matter if it’s used in a PDF or in a non-editable html page as long as the font is subsetted and reasonably protected?

Typekit represents a relatively simple solution for all these legal issues. They have a collection of fonts (most free, some paid) that you can link to via @font-face for a monthly fee (free, $25, $50 and $250 per year). The idea is interesting and it liberates designers from having to think about legal issues, but I don’t see it as a long-term solution and reliance on third-party content providers makes me nervous.

Conclusion

Using embedded/linked fonts on the web is gaining momentum but there’s still a long way to go before we’ll be able to take advantage of the technology in an easy, clear and legal manner. Even if WOFF is adopted by everyone including Microsoft, it’ll take years before it’s available in all browsers, so for better or worse we’ll be stuck with EOT for some time.

For now, the safest route would be to use only free, open source fonts whose licenses explicitly allows for linking, or Cufón/sIFR if you want to use Adobe Originals fonts.

Further reading

Below you can find links to relevant articles and resources that may help you:

• FontSquirrel.com – 100% free fonts for commercial use – includes an online EOT/WOFF generator
• FontEx – Hand-picked free fonts
• Cufón – font converter and download links; plugins for Wordpress and Drupal (and maybe others) are available on their respective repositories\
• Typekit – commercial font embedding service
• Microsoft Typography – Web Embedding Fonts Tool (WEFT) – the original EOT converter
• Minutes on the meeting on EOT & font embedding (from 2008, you can see their diverging POVs)
• Adobe, web fonts and EOT – Adobe’s position (2008)
• Type Designer Tal Leming’s views on web fonts embedding
• Microsoft’s forgotten monopoly by Opera’s Håkon Lie (it’s older, from 2006, but you can get an understanding of their stance)
• Core fonts for the web (a.k.a. “safe web fonts”)
• Fonts and the Web – FontEmbedding.com – some legal explanations
• Web Open Font Format for Firefox 3.6 – describes the WOFF status
• Becoming a Font Embedding Master- excellent article on the technicalities of using @font-face