Ministry of Innovation —

Web Open Font Format backed by Mozilla, type foundries

Type designers and Web designers have reached a consensus on a format …

Efforts to bring advanced typography to the Web have reached an important milestone. Type designers Tal Leming and Erik van Blokland, who had been working to developing the .webfont format, combined forces with Mozilla's Jonathan Kew, who had been working independently on a similar format. The result of the collaboration is called Web Open Font Format (WOFF), and it has the backing of a wide array of type designers and type foundries. Mozilla will also include support for it in Firefox 3.6.

WOFF combines the work of Leming and Blokland had done on embedding a variety of useful font metadata with the font resource compression that Kew had developed. The end result is a format that includes optimized compression that reduces the download time needed to load font resources while incorporating information about the font's origin and licensing. The format doesn't include any encryption or DRM, so it should be universally accepted by browser vendors—this should also qualify it for adoption by the W3C.

Solving different problems

Jonathan Kew has been involved in font technology for some time, and had been following the discussions of how to best support fonts and @font-face directive in browsers. "I thought I could see a possible way forward through both the technical and the political issues surrounding Web fonts, and so I put forward a proposal," Kew told Ars.

That format was called ZOT, and was based on compressed OpenType. "Kew's proposal described a way to compress the individual tables of a SFNT font in a way that not only made the file smaller, but it also offered possibilities for smarter bandwidth use," explained Leming. "For example, a mobile browser could only download the cmap table from the font, decompress it, look at its contents and decide if the rest of the font should be downloaded. This format was liked quite a bit by some of the browser makers, but it wasn't well known among the type industry," he told Ars.

This is a sample page created by noted typographer Erik Spiekermann using WOFF versions of FF Meta and FF Meta Serif displayed in Firefox 3.6 beta.

Meanwhile, Leming and Blokland were working on their own .webfont format, which had started to attract support from those in the type industry. The two found themselves spearheading the work quite by accident. "The type industry is a very loose and diverse group of small companies, departments of bigger companies and a lot of individuals," Blokland told Ars. "Nobody appointed us their official negotiators or representatives—Tal and I just got involved because we found it too important to ignore and wanted to find a solution that was acceptable to all parties, foundries, Web developers, user agent builders. So we started working on a new proposal, listening to many parties, trying to address real issues and use open standards," he said.

Some type companies wanted encryption and the ability to compel browsers to enforce licensing. Browser vendors wanted open standards, compression to speed downloads, and didn't want to be responsible for font licensing enforcement. Web developers wanted something easy and straightforward to use.

The proposed .webfont format attempted to address those issues and presented a compromise that would work for everyone involved. It used font data in the same format as OpenType (it was capable of handling future formats, too) so it wouldn't require any new font handling code. It included a rich metadata section, with fields for copyright and licensing information, as well as a private data area that type foundries could use for whatever else they wanted to include. There was basic ZIP-based compression, but no DRM or encryption. A font in the .webfont format couldn't be trivially installed on a computer for use, so it offered some protection from casual copying.

H�kon Wium Lie, the "father" of CSS and a developer at Opera, suggested that Leming and Blokland combine forces with Kew to develop a sort of �ber-webfont. "Erik and I both liked ZOT, so we were open to the idea," Leming told Ars. "After that, we worked with Jonathan to combine the proposals. WOFF combines Jonathan's ZOT compression and structure with the metadata and private data spaces that we had in our .webfont proposal. We think that we were able to combine the best of both proposals," he observed.

Widespread support

Kew, Leming, and Blokland have published a specification for WOFF, and Mozilla is already hard at work implementing support for it in Firefox 3.6. Firefox will have a default same-origin restriction, so it will only load WOFF fonts from the same domain as the webpage being loaded—a restriction that puts type vendors at ease. The ability to load fonts from other domains can be enabled by a server using Cross-Origin Resource Sharing (CORS).

It seems likely that WOFF could eventually be adopted by browser vendors outside of Mozilla, including Safari—and by extension, WebKit-based browsers like Chrome—as well as Opera.

WOFF has gained wide support from type vendors, as we found when speaking to both larger companies like FontShop International and small, one-man operations like Mark Simonson Studio. "Basically, I like it because it's designed specifically for Web browsers," Mark Simonson told Ars. "It's compressed, so it minimizes bandwidth use and, because it only works in Web browsers, not on the desktop, it's easy to make it clear to customers what it's for when they buy a license."

"FontShop International—home of the world's largest collection of original, contemporary typefaces, the FontFont Library—supports WOFF, since users, designers, and foundries all need a Web fonts format," agreed Ivo Gabrowitsch, marketing director for FSI. "We want to support honest users, offering them the typographic variety they want to have, but are not willing to offer our library to use with insecure technologies, such as 'raw fonts' via @font-face. We want a more protected way of serving professional fonts to the Web, though such a format must respect the issues of all the involved, without the hassle of DRM. The technology must be easy of use with minimal impediments on both Web designers and readers," he told Ars.

Another well-known studio, House Industries, is also excited to take advantage of the new format. "We think that WOFF will ultimately provide a better global typographical solution because it will be more likely to gain the consensus of the browser developers, Web developers, and type designers," House Industries co-founder Rich Roat told Ars. "And selfishly, it will dramatically broaden the market for our typography and make it easier for us to deliver if there is eventually a standard format that is universally accepted."

Dozens of type designers and vendors have already pledged support for the format, and preliminary tools are already available to create WOFF fonts from existing OpenType fonts. "We worked together with the type community to make this happen, have created new business opportunities for type creators, have given new capabilities to Web developers and have given the opportunity for a much more expressive Web for users," Kew said. "It's a win for everyone involved."

A demonstration of more advanced typography possibilities by Mozilla's Jonathan Kew.

It seems that more expressive typography will be working its way to the Web soon. But Kew isn't stopping at basic font support via WOFF. He has also been experimenting with implementing support for advanced typographic features like ligatures, discretionary forms, alternate forms, tabular figures for easier to read tables, and more, all via CSS properties. This advanced support is still in the very early stages of development, but type and design nerds can definitely get a sense of the possibilities by checking out a demo video he created (above) showing off work that may turn up as soon as Firefox 3.7.

Ultimately, all this work will enable websites to take on the expressiveness of print, and extend it further with CSS animations. The benefit of supporting @font-face with WOFF fonts (instead of converting type into images or Flash) is that text will remain accessible. With support already coming in the next version of Firefox, WOFF may gain adoption much faster than many had expected. Like Kew said, it's a win for everyone involved.

We have an introduction to @font-face and related CSS technology for those looking for more background, as well as a look at some of the issues that prompted solutions like TypeKit and ultimately WOFF.

This is excellent news. The addition of this capability to websites is sorely needed and should spur a growth in website redesign. That means more work for web designers and developers everywhere. I hope all the browsers, (I'm looking at you IE) come to a common solution quickly. Implementing this font solution in a consistent manner across browsers is the only way this is going to work and I implore all browsers developers to work together to make it happen.

I don't see how all this talk about licensing and drm and such would work, if open source browsers can read the font and render them then it should be trivial to duplicate any such font?

It should at all times be doable to duplicate information where both the data and the routines to use that information are present at the same location, but it should be trivial when these are in an open source project like a browser.

If I want to include on my web page a font that has an open source license, one that comes with Linux, for example, but which isn't necessarily installed on every computer viewing my site, or a font of my own that I wish to make freely available, then I wouldn't want that font to be labelled as only usable on my web site. Thus, while it makes sense for a font format to support the use of proprietary fonts, of which the site owner has a license, but not viewers of the site, there should also be a fully-open option as well, so that open fonts don't need to be downloaded twice.

It's nice that you guys are using Ogg Vorbis encoded videos instead of Flash, but if it doesn't provide a full screen option, it kind of sucks. This is exactly the kind of video (one with very small text that is meant to be seen clearly) which demands a full screen option.

Originally posted by trencher93ish:Oh, great, now the text size on web pages can be EVEN SMALLER. That's all the web needs. What is it about fonts that makes type designers like small and unreadable, anyway?

Uh. Increase your browser's font size? This is a feature that's only been around for the last 10 years or so in every single browser.

Interesting in the extreme. I can only hope for somewhat rapid implementation by all involved parties.

Also, seconded on Kew's voice. It has some sort of inflection that relaxed me - to the point where I found myself nodding off. Then again, it could be because it is Monday morning, I am alone in the office, and there is a decided lack of coffee.

Otto96 - Ars actuallu use a combo of OGG, MP4 and Flash. Each browser choosing what they think i best. And this is an excellent solution. Safari uses the MP4 version, and in Snow Leopard (at least) you get an full screen option. No buffering, hardly any CPU load, snappy scrubbing. I am a very happy camper. Flash video: Please die!

Originally posted by Otto96:It's nice that you guys are using Ogg Vorbis encoded videos instead of Flash, but if it doesn't provide a full screen option, it kind of sucks. This is exactly the kind of video (one with very small text that is meant to be seen clearly) which demands a full screen option.

Originally posted by John Savard:If I want to include on my web page a font that has an open source license, one that comes with Linux, for example, but which isn't necessarily installed on every computer viewing my site, or a font of my own that I wish to make freely available, then I wouldn't want that font to be labelled as only usable on my web site. Thus, while it makes sense for a font format to support the use of proprietary fonts, of which the site owner has a license, but not viewers of the site, there should also be a fully-open option as well, so that open fonts don't need to be downloaded twice.

I'm not exactly sure what you are trying to say here, but I think you're suggesting that you'll not be able to use freely available open source fonts somehow, which isn't the case.

At first I was a little confused about how the same-site origin restriction worked, but basically Firefox will only download a WOFF typeface if the file is hosted on the same domain, unless the server the font file is being accessed from specifically enables CORS.

The licensing information that font vendors can include in the file when they generate it for you is merely for informational purposes, and the browser does not place any restrictions on WOFF fonts based on that information.

Presumably there will be tools that allow you to generate WOFF files from open source OT fonts if/when needed.

Additionally, you can still specify additional fonts in your CSS rules as fallbacks if your preferred WOFF font for some reason doesn't work (e.g. the browser doesn't support it).

Originally posted by Azzmodan:I don't see how all this talk about licensing and drm and such would work, if open source browsers can read the font and render them then it should be trivial to duplicate any such font?

It should at all times be doable to duplicate information where both the data and the routines to use that information are present at the same location, but it should be trivial when these are in an open source project like a browser.

There is no DRM, so I'm not sure what you are trying to say. Yes, it will be possible for the technically savvy to be able to extract the font data and generate an OTF file if one were sufficiently motivated to steal the font—something the foundries concede is soemthing they likely wouldn't be able to stop even if they did use DRM (which they are NOT using in WOFF).

The point is that WOFF makes it so that it is not as trivially easy as copying an OTF or TTF from the browser cache (or some other method).

Originally posted by trencher93ish:Oh, great, now the text size on web pages can be EVEN SMALLER. That's all the web needs. What is it about fonts that makes type designers like small and unreadable, anyway?

Uh. Increase your browser's font size? This is a feature that's only been around for the last 10 years or so in every single browser.

Yeah ... that makes pages look really bizarre. My local newspaper has a layout that, when you increase the font size, pushes the text almost completely under another column.

I'll give Opera credit for having whole-page magnification, which scales text along with images so text isn't "under" other things or cut off. But Opera doesn't have AdBlock Plus, NoScript, FlashBlock etc.

By the by people - we don't have to wait for custom font usage with this upcoming Mozilla format they are developing. The "@font-face" CSS Element is already usable in FF v3.5 - Opera v9 and Safari v4. It works with TTF (true-type) and OTF (open-type) fonts. You link to the font as you would an image. And you have to have the Font accesible from the web. IE v7 does not like it and will disregard it. I assume IE v6 will behave the same. IE v8 - I have no idea as I can't test for it. Chrome - even tho it's WebKeit-based - doesn't seem to render the fonts either.

Not sure about ligatures in this manner - haven't played with those yet. So there might or might not be an advantage to the formats mentioned in the article - but it might not matter in the short term as OTF does support embedded ligatures.

Those of us that have roots from the Print World - do not get your hopes up - as everything CSS v3 is capable of doing with Fonts is in it's infancy and is very limited. It's great that we are finally getting support for live custom fonts. But that is about as far as it goes for now. Unless you do some crazy mad layering and CSS tricks.

quote:

Originally posted by LordDaMan:Isn't this basically what IE did a decade ago?

Yeah - with a proprietary Font Format and an IE Only fix. Not to mention having to convert fonts over to said proprietary format (which was a pain in itself).

I hope we get these type of features in e-readers as well. (They are not web-browsers, but they do generate text on the fly.) I'm sure it would look absolutely stunning on some of the larger readers.

And does this mean we'll soon be seeing kinetic types (http://www.youtube.com/watch?v=FLyGaqdf69c&feature=related) done all in browser? It will be a brave new world of annoying and interesting web design.

You know, the fact that designers have been bitching about this since '94 or so, and yet people are still talking "efforts to bring advanced typography to the Web have reached an important milestone" instead of "it works in all current browsers" really says something about how important the general public thinks this is.

quote:

Originally posted by Lesmothian:Uh. Increase your browser's font size? This is a feature that's only been around for the last 10 years or so in every single browser.

BUT! THAT! ENCROACHES! ON THE INTEGRITY! OF! THE DESIGNERS! VISION! Yeah, I really do think most designers talk (or at least think) like a bad Shatner impression, hitting pinnacles of self-importance. I'm just hoping this doesn't get us back to the bad old days, when you couldn't change the font of a web page. I also hope it doesn't mean slower load times on web pages. The web is slow enough, thank you.

Originally posted by Kloro:I'm just hoping this doesn't get us back to the bad old days, when you couldn't change the font of a web page. I also hope it doesn't mean slower load times on web pages. The web is slow enough, thank you.

You can always either turn off CSS or apply a custom user stylesheet to override fonts specified by a designer, just as you can now in every browser that I can think of. Also, the font table compression that is part of the specification is specifically designed to minimize the impact of downloading fonts.

I'd argue that downloading a font will have far less impact than downloading a Flash file, and has the added benefit of being accessible (copy/paste, screen reader, custom CSS, etc).

The point is that WOFF makes it so that it is not as trivially easy as copying an OTF or TTF from the browser cache (or some other method).

Until, of course, FreeType and similar rendering libraries add support for fonts in the WOFF format (which is the natural way to support such fonts in multiple web browsers), at which point any application can use them natively.

WOFF has some nice features, such as the ability to download the font incrementally, but to think that a special container format is going to prevent such fonts from being used in other contexts over the long term is just silly. After all, that approach has never worked before--and not for lack of effort.

Yay!I'd pretty much given up on there ever being a decent solution to this. It actually sounds like something that has enough of what the major players demand that it should be acceptable to all, and yet not make my (web dev/design) job a living hell as a consequence.

Originally posted by Lesmothian:Uh. Increase your browser's font size? This is a feature that's only been around for the last 10 years or so in every single browser.

BUT! THAT! ENCROACHES! ON THE INTEGRITY! OF! THE DESIGNERS! VISION! Yeah, I really do think most designers talk (or at least think) like a bad Shatner impression, hitting pinnacles of self-importance. I'm just hoping this doesn't get us back to the bad old days, when you couldn't change the font of a web page. I also hope it doesn't mean slower load times on web pages. The web is slow enough, thank you.

It probably means both considering there's font data to download and then the page itself. There's a serialized relationship in that process that says the rendering can't be done until the font is installed and ready for use.

I need to go read the spec but how are they handling security? Let's hope the type systems at the OS level are ready for Internet installed fonts or the browser cache's are ready to prevent types from poisoning the cache. I can't help but think that this is another security attack vector for all browsers. While, I wish the selection of fonts was a bit wider than the Arial/Sans Serif/TNR family of fonts, there's a certain comfort level that users have in seeing web page after web page with the same fonts. I'm fearful that we'll digress back to the early 90s as designers abuse the new CSS features just like they did Flash when Flash became a popular addition to the designer toolbelt. Progress needs to happen but let's hope this particular bit of progress doesn't end up giving us 36 point, highly stylized fonts on a web page that can't be changed or scaled. The vast majority of web sites share very little in common with print anything. Additional fonts screams Target and Kmart Ad web design to me as the amateurs design site after site with no regard to the readability of the fonts they are using.

Originally posted by Kressilac:It probably means both considering there's font data to download and then the page itself. There's a serialized relationship in that process that says the rendering can't be done until the font is installed and ready for use.

Firefox doesn't work this way... it'll render in alternate or default fonts until the WOFF resources are downloaded and processed.

quote:

Progress needs to happen but let's hope this particular bit of progress doesn't end up giving us 36 point, highly stylized fonts on a web page that can't be changed or scaled. The vast majority of web sites share very little in common with print anything. Additional fonts screams Target and Kmart Ad web design to me as the amateurs design site after site with no regard to the readability of the fonts they are using.

This is exactly what @font-face + WOFF is designed to prevent. Using this method, as opposed to image files or Flash, means that fonts can be replaced with custom style sheets, CSS can be turned off, font scaling can be used, etc.

Allowing additional fonts won't increase amateurish design, though it has potential to make it ugly. However, ugly, poor design exists without WOFF anyway. At least it gives talented, knowledgeable designers more and better tools to work with.

The point is that WOFF makes it so that it is not as trivially easy as copying an OTF or TTF from the browser cache (or some other method).

Until, of course, FreeType and similar rendering libraries add support for fonts in the WOFF format (which is the natural way to support such fonts in multiple web browsers), at which point any application can use them natively.

Perhaps, but so far the social contract between browser vendors, type vendors, and designers is that WOFF fonts will only work in a browser.

quote:

WOFF has some nice features, such as the ability to download the font incrementally, but to think that a special container format is going to prevent such fonts from being used in other contexts over the long term is just silly. After all, that approach has never worked before--and not for lack of effort.

As long as OS vendors and other software makers agree to abide by the social contract—that WOFF fonts only work in browsers—then type vendors won't require DRM or other draconian methods, or worse, just go back to not licensing fonts for use on the web.

Maybe it won't work in the long term, but perhaps it'll work long enough for another solution to be put in place. Here's hoping, anyhowways.

As long as OS vendors and other software makers agree to abide by the social contract...

Good luck with that. (Or not; I'm not really hoping it works.) You may get Microsoft and Apple to abide by your "contract", but I really doubt e.g. Debian is going to suppress font libraries with native support for WOFF, particularly if doing so means that every web browser has to include its own (incompatible) implementation instead.

Even if you did manage to withhold native WOFF support from other kinds of applications, it only takes one person with a WOFF-to-OT converter to open the font up for general use. And even without that, most of the unwanted behavior involves other web sites copying the font for their own use, which WOFF does absolutely nothing to address.

In short, WOFF is useless as a means of control--as it should be--so why waste any effort preventing it from being used in non-web applications?

Originally posted by SoylentBlue:Don't forget, you can always zoom in Opera, with the Scaling at the bottom/Right, set it to 500% and see the lovliness of vector fonts.

Ah, that's the problem. Lack of resolution! A bit of zoom on both pages and they rendered much more nicely. The second one actually looks pretty decent in Firefox too, but I'm assuming that's just because I happen to have the necessary fonts already installed.

Originally posted by nybble41:WOFF has some nice features, such as the ability to download the font incrementally, but to think that a special container format is going to prevent such fonts from being used in other contexts over the long term is just silly. After all, that approach has never worked before--and not for lack of effort.

The idea of owning and licensing fonts is joining the buggy-whip business. How many minor changes does one need to make before it's a new font that the original licensor has to license back, anyway? There are only so many ways to decorate type, and anything that's not algorithmic (and therefore patentable in many places) has been done a long time ago. Are we to the point of copyrighting names to try to force browser vendors to license the name, like Pantone copyrights its own names and numbers for colors that it can't copyright?

Why not just ignore fonts that aren't PD or open source licensed? Anything that isn't used on the web becomes marginally useful for non-specialist computer users, and no end user or web designer or browser vendor need worry about the issue. If anyone needs their work to be used on the web, they can license it PD or open source, and reap the kudos just like other open source contributors.

Compare it to Firefox and IE, which just show the standard version... Go wonder why American companies are always just following European and Japanese ones.

Um, Safari and Firefox both already work with @font-face for TrueType and OpenType fonts, and have for some time—so I have no idea what point you are trying to make here.

WOFF is a new format designed specifically for web use and Firefox has the first working implementation of support for it. Opera does not currently support it, though I assume from Håkon Wium Lie's involvement in the WOFF process that support would be forthcoming.

Originally posted by SoylentBlue:Don't forget, you can always zoom in Opera, with the Scaling at the bottom/Right, set it to 500% and see the lovliness of vector fonts.

Ah, that's the problem. Lack of resolution! A bit of zoom on both pages and they rendered much more nicely. The second one actually looks pretty decent in Firefox too, but I'm assuming that's just because I happen to have the necessary fonts already installed.

Nope, it's because Firefox and Safari already support @font-face with TrueType and OpenType fonts. IME, Firefox and Safari both have vastly superior font rendering than Opera does, at least on Mac OS X.