Web fonts and standards

AS FAR back as 1998, CSS2 provided a way to link to real fonts from your style sheet:


  @font-face {
  font-family: "Watusi";
  src: url("http://www.example.com/fonts/watusi.ttf") 
  format("truetype");
	}

  h1 { 
  font-family: "Watusi", sans-serif; 
	}

	

Instead of static pictures of fonts, linked font files can be retrieved from the web and used to display HTML text. And not just for headlines, but for body copy, too. It’s brilliant! It’s magnificent! There are just two problems:

  • Unless they are specifically licensed for web use (and few fonts are), if you embed fonts you own on a web page, you may be violating your End User Licensing Agreement (EULA) with the font foundry.
  • While Safari (and other Webkit browsers, including Google Chrome), Opera, and Firefox support @font-face for TrueType (TTF) and OpenType (OTF) fonts, guess which browser does not? That’s right, Internet Explorer. That’s not because IE is technically inferior to the other browsers. Rather, it’s because Microsoft does not wish to provide technology that might infringe on the rights of type designers. Instead, Microsoft supports @font-face only for the Embedded OpenType (EOT) format—which Microsoft itself invented. EOT discourages the copying of copyrighted font files via encryption, “subsetting” (using only needed characters rather than the entire font), and other techniques. Microsoft has supported EOT—and proposed it as a W3C standard—since IE4 was young. No other browser maker supports EOT.

The Tan method and IE

It’s the perennial web standards problem, but until Microsoft joins the party, Jon Tan offers a commendable workaround, combining standard @font-face with EOT served via IE conditional comments. It’s a hack, perhaps, but a clean one—and one that even Microsoft would approve. Nice work, Jon Tan. That’s one hurdle cleared.

The licensing hurdle

Type foundries are on the verge of agreeing to standards that will protect their rights and enable designers to embed real fonts on their web pages via standard CSS. They are on the verge, but not there yet. Competing proposals include Erik van Blokland and Tal Leming’s .webfont, a compressed format containing XML and font data; Ascender’s EOT Lite, which removes the chief objections to Microsoft’s EOT while still working in IE; and David Berlow’s OpenType Permissions and Recommendations Table, a mechanism for showing that the designer has paid for the right to use a particular font on a particular domain.

Using @font-face in all browsers today

Some of these methods work already. For instance, on Font Bureau’s website, you will soon be able to buy a web- and print-licensed version of one of their fonts for 20% more than a print-only-licensed version, and embed it on a given domain via @font-face. It will be legally licensed, and it will work in Safari, Firefox, and Opera. It will even work in IE, if you use Jon Tan’s workaround.

Rise of the middlemen

Until type designers agree to a standard and all browsers support @font-face embedding of TrueType and OpenType fonts, “middleman” platforms such as Typekit and Typotheque will make real web fonts possible by handling licensing and technological hassles.

As nearly all of you reading this know, here’s how it works: First, companies like Typekit get font vendors to sign on. The companies agree to license their fonts through Typekit. Designers pay a monthly fee to Typekit for arranging the license and hosting the fonts. Typekit also provides a technology solution, ensuring that the fonts show up in browsers that support standard font formats via @font-face (Safari, Firefox, Opera) as well as the one that does not (Internet Explorer).

Worth noting is that Typekit is font foundry agnostic, welcoming all, whereas Typotheque is a foundry-specific solution. The wizards at Clearleft have their own middleman platform in the works. All these solutions are currently in beta.

As of this writing, their pricing models are unknown—and price is sure to have an impact on acceptance.

Moreover, by definition, no web font middleman (or font developer, like Typotheque) offers every font you could wish for, and ultimately, designers will only choose a service that provides fonts they wish to use. Nor is it yet known whose technical solution will be best, whose font file will load fastest, how reliable each hosting platform will be as usage scales up, and so on.

The effect of font services on web standards

It remains to be seen whether a font-licensing standard and universal browser support for @font-face will kill the middlemen, or whether the middlemen will prove so successful that they delay or stifle the adoption of a font-licensing standard and allow Microsoft to shrug its shoulders indefinitely at supporting @font-face for anything beyond its proprietary EOT file format.

There is also the possibility that the middlemen, by increasing acceptance of web fonts, will hasten the arrival of a licensing standard—and that this will, in turn, prompt Microsoft to support @font-face for any licensed font.

ShortURL: zeldman.com/x/54

76 thoughts on “Web fonts and standards

  1. This is a nice summary of where we’re at. I think Typekit and others will, like travel agents, exist so long as others are able or willing to cope directly with the problem. If anything I’m looking forward to using these services to 1. return money to great font designers, 2. demonstrate that the web can cope with more than the handful of fonts used today and provide a better user experience, 3. move us towards a simpler solution in the long run. This is going to be an intermediate messy phase until a direct model is arrived at.

  2. Great post. Nice overview of where we\’re at now. My prediction is that the \”middlemen\” will once again prove to provide us with a great temporary solution.

    I\’ve been playing with some of these middlemen\’s beta products, and they\’re great. Really, they are. But I still envision a day in which the foundries wake up, come around, and license their fonts for linking directly. So, to me, the middlemen seem like a worthy solution for the interim, but I don\’t think designers will be truly happy until foundries give us the goods without the workarounds.

    That day will come. When? Who knows. I hope Veen and the others make a boatload in the meantime.

  3. Great post Jeff! =)

    I’m already using @font-face in my some of my designs but IE users are still only seeing the old boring ones. So thanks for a link to a solution to that problem! =)

  4. I don’t mind if the middlemen get rich. I do admit, though, that I’m fearful of the long-term costs of having to “rent” fonts (or more pointedly, convincing clients they should rent a font for their site.)

  5. Pingback: Anonymous
  6. I do admit, though, that I’m fearful of the long-term costs of having to “rent” fonts (or more pointedly, convincing clients they should rent a font for their site.)

    This concerns me as well. I’m happy for, and greatly admire, the people behind the middleman solutions mentioned in this post. Their knowledge of type, of usability, and of interface design (not to mention their technological prowess) are evident in every detail of the beta platforms I’ve tested.

    It’s not just the right idea at the right time, it’s the right people having that idea—and executing beautifully. Thumbs up (and gratitude) for all that.

    BUT the rental/hosting model worries me. I would rather pay a little extra for a web license and host it myself than trust my site or my client’s to a third-party service provider who obliges my client to pay forever (as if a font was cable TV), and whose service, no matter how reliably constructed and redundantly backed-up, adds fragility to the ecosystem.

  7. I would rather pay a little extra for a web license and host it myself than trust my site or my client’s to a third-party service provider who obliges my client to pay forever (as if a font was cable TV), and whose service, no matter how reliably constructed and redundantly backed-up, adds fragility to the ecosystem.

    Great post, Jeffrey — “font rental” is the biggest for me with these middlemen, but as with many technology issues I’m much more willing to experiment (and accept the related risk) on my own, personal projects than with client work.

    That’s essentially how I’ve always incorporated new playthings into my toolbox: prove their worth in my own work first, then present them to clients with the confidence of experience.

  8. I’m curious what the reasoning behind Font Bureau’s decision to price fonts licensed for the web at “20% more than a non-web-licensed version.” Is it a “print + web” license? Otherwise it feels like it’s more limited and more expensive at the same time, and a pricing plan that expects people to steal the fonts from licensed user’s sites. (I don’t think this is necessarily the case, and it doesn’t make Font Bureau’s approach unacceptable to me, but it would be good to have a little more clarification about what Font Bureau’s web-licensed fonts allow for before I jumped on board.)

    That said, in either case I think it’s a step in the right direction.

  9. I’m curious what the reasoning behind Font Bureau’s decision to price fonts licensed for the web at “20% more than a non-web-licensed version.” Is it a “print + web” license?

    Yes, sorry I didn’t make that clear. It is a print plus web license.

    I’ve updated the text to so state. Thanks.

  10. Thanks for the update. Web fonts are finally happening!

    Font Bureau web fonts (OT plus a new permissions table) will be available very soon. They work with the current standard on Safari and Firefox. I am trying it out on a big academic web site, and it should be up next month!

    I’m not the final word at the Font Bureau, and the announcement has not yet been made. The FB pricing model, as at most foundries, is based on numbers of CPUs doing the authoring. The smallest license covers 1-5 workstations. Font Bureau is not charging for end-users, any more than it does with fonts intended for print.

    You can extend a current license to cover web, or get a new font. In both cases, Font Bureau will send a new file with the perm table, and a unique name.

    *
    The Ascender font format, EOT Lite or EOTL (pronounced YOAtel), announced last month (http://www.ascendercorp.com/pr/2009-07-15/) also works now, but only with IE. The advantage of going to Ascender is that you don’t have to roll your own EOT fonts, which can be tricky due to “URL-binding”, as Jon Tam found out. If someone wanted to license a web font from Font Bureau in both OT and EOTL, I am sure we could work that out.

    I’m wearing two hats here. From the type design side, I like the web/perm font solution David Berlow has devised, and hope its use will put pressure on Microsoft to let got of EOT. From the web designer’s point of view, I want my fonts now! And I don’t want to wait for Microsoft to freeze over. Even if they did, when they release a new browser it would take 18 more months for the new web font standard to trickle down to PC end users.

    By using two font formats I get the type I want on a page—to more users. Now!

  11. I’m surprised not to see a mention of sIFR. Not to say that it solves the licensing issues–and sIFR has its own performance issues–but sIFR has become a pretty standard method for using high-end typefaces on websites.

  12. @Andrew w:

    sIRF has brought real typography to headlines and subheads on the web. A review of sIFR is germane to any serious discussion of web typography in general. But this post is about embedding fonts via the @font-face standard. ;)

  13. Another issue to consider with the middle men is something along the lines of what we’ve seen with URL-shortening services: what if they get hacked or go away? They would seemingly take all of your fonts with them, possibly spread malware to your user base, and cost you just as much – or more – in the long run versus buying web licenses for your own fonts. I’d rather maintain control over my entire site, fonts included.

  14. It’s the perennial web standards problem, but until Microsoft joins the party, Jon Tan offers a commendable workaround, combining standard @font-face with EOT served via IE conditional comments

    This is not entirely true. You dont need conditional comments to serve EOT to IE. You can mention in the same @font-face declaration. Only issue is IE will download all kinds of formats even though it will only understand EOT. If your font sizes are small that is not an issue, but if they are large you would need conditional comments to do so.

  15. The idea of a payed service such as Typekit doesn’t necessarily bother me for the sole fact of paying, but as you said Jeffrey, it’s almost like a font would be treated like cable if designers and their clients were charged monthly (or yearly).

    It’s just my opinion, but I think an option such as a flat rate payed per font and per domain it was used on would be more reasonable.

  16. Earlier this month, the then competing proposals .webfont and ZOT (the latter by Mozilla) have been combined to become WebOTF, which is basically ZOT with an additional pocket for .webfont’s XML metadata. So the competing proposals now are WebOTF and EOT Lite.

  17. Worth noting is that Typekit is font foundry agnostic, welcoming all, whereas Typotheque is a foundry-specific solution.

    I am not sure what you mean by agnostic vs foundry-specific solution. Both systems (Typekit & Typotheque) will support any font, in any format. In fact Typotheque solution is more welcoming to non-Latin scripts, because it supports also advanced glyph positioning required for complex languages such as Arabic or Hindi.

  18. Like many of the posters I am very concerned about cost and its effects. Having to license type on a monthly or annual basis will automatically preclude smaller sites, run by small businesses, from using type other than the system standards. This will create something of a ‘type-ghetto’ in which only the commercial sites with larger budgets get to enjoy the benefits of interesting typography. Will foundries offer discounts to non-profits? There are many questions.

    Additionally the monthly/annual fee seems problematic for many of the reasons already mentioned (what if they go out of business?) I would think a one-time fee/license would be the way to go, so that I or my client ‘owns’ the typeface for a particular site. Again, this will cause problems for small players concerning price. I could only hope that eventually fonts are commoditized to a point where pricing comes within reason.

  19. For those wondering about whether it’s right/cost-effective to rent a font, the question has to be how much extra does it cost the developer(s) in time/hassle by either creating images for all headings to work around the font problem? Or if they use fonts that are not guaranteed to work across all platforms, how much time to they spend either testing the site against such eventualities or dealing with support issues where font-wrapping issues have broken a page (e.g. a critical log-off link is pushed off the page because they had a poor font substitution occur).

    I’d pay for piece of mind every time.

  20. @Jeffrey and all:

    Some remarkable, even amazing, developments have come out of discussions between browser developers, web developers, and font producers on the W3C Web Fonts mailing list.
    To the point where there is actually an experimental Firefox build (courtesy of .webOTF co-creator and Mozilla developer Jonathan Kew) that supports both EOTL (EOT Lite) and Jonathan and Tal Leming’s proposed .webOTF.

    Available here.

    Now that the objectionable elements to the original EOT have been totally removed (even the XOR scrambling which I originally reported could not be removed), cross browser support for both EOTL and .webOTF in the near future is a real possibility.
    This would bring web fonts as close to being a “web safe” proposition as is possible within only 2-3 years and at the same time, open the doors wide open to the use of both free and licensed fonts.
    There’s been give and take by all – with special kudos to the devs at Mozilla: John Daggett, Robert O’Callahan, and Jonathan Kew who wisely decided, in the light of new facts, to entertain notions they had previously dismissed.
    There’s some miles to go before those closely involved can go to sleep on this, but a near-term solution is tantalizingly close.
    Apple and Google and the WebKit folks have yet to weigh in on the matter. They should be urged to do so.

    Keep shining the light.

    Richard Fink

  21. @Ian:

    For those wondering about whether it’s right/cost-effective to rent a font, the question has to be how much extra does it cost the developer(s) in time/hassle by either creating images for all headings to work around the font problem? Or if they use fonts that are not guaranteed to work across all platforms, how much time to they spend either testing the site against such eventualities or dealing with support issues where font-wrapping issues have broken a page (e.g. a critical log-off link is pushed off the page because they had a poor font substitution occur).

    You’re comparing apples to bicycles. No one is talking about creating images for all headings. If replacing headings is all you’re concerned about, sIFR and Cufón have already solved that problem. Cufón does not even require a Flash plug-in, or any plug-in. It just works. Cufón’s problems are chiefly licensing concerns; a font staged on your site via Cufón probably violates your EULA.

    As for working across platforms, any font will work across platforms in any browser that supports @font-face. All modern browsers do that. To make it work in IE, convert the font to EOT via WEFT. The Tan method, discussed in the post, lets you do this without penalizing IE users. None of this is difficult. Indeed, leaving the whole web standards question aside, merely from the point of view of developer ease of implementation, I’d a lot rather use @font-face than try to make sIFR work — although I hear sIFR 3.0, which I’ve not tried yet, is loads easier than its predecessors.

    Any competent HTML slinger can set up @font-face in five minutes. Call it fifteen, tops, if you want to support IE via the Tan method. I wouldn’t rent fonts to save 15 minutes of easy work. The middlemen are primarily valuable because they solve the licensing issue in the absence of an agreed-upon standard. That’s 99% of their value. Convenience of implementation is maybe 1%.

  22. @Peter Bilak:

    I am not sure what you mean by agnostic vs foundry-specific solution. Both systems (Typekit & Typotheque) will support any font, in any format. In fact Typotheque solution is more welcoming to non-Latin scripts, because it supports also advanced glyph positioning required for complex languages such as Arabic or Hindi.

    My initial experiments with Typotheque have impressed me; I mean to do more with it, and I meant no disrespect by my comment. My impression was that Typotheque was a platform for serving Typotheque-designed fonts. (You are, after all, a type design shop, and an excellent one.) If my assumption was incorrect, and you intend to serve competitors’ fonts as well as your own, please tell me, and I’ll correct the error above.

  23. You’re comparing apples to bicycles.

    Oh yeah, true … but I think I may not have made myself clear. I *totally* agree with you. What I meant to say, and failed to say clearly – oops – was that for people who reject the idea of paying for a font (see Dan’s comment on font rental above), in my opinion that is clearly preferable to sticking with old-skool workarounds (text as image) or just hoping for the best (using a font stack and hoping it’ll render OK). And that’s what I meant by saying “I’d pay for piece of mind every time.”

    So, the comparison of apples and pairs was more like a comparison of the cost of so many apples and the cost of so many pairs. Hope that clarifies it!

  24. Oh hang on … I think I’ve misunderstood. So it’s possible to do this without renting a font? I guess I should have tried out Jon Tan’s thing before commenting. D’oh! Something to try out tomorrow …

  25. Pingback: yippie-kay-yay
  26. While I agree with what has been written, I guess I’m just left wondering where this leaves the little guy, like me, who doesn’t and can’t afford to shell out fistfuls of dollars to buy fonts, licenses and subscriptions.

    While I’d like to use it as I adopt more and more CSS properties as far as CSS3 goes, I can’t help but feel left out and as well as the others who aren’t in the position to buy, like myself.

  27. I’m just left wondering where this leaves the little guy, like me, who doesn’t and can’t afford to shell out fistfuls of dollars to buy fonts, licenses and subscriptions.

    Excellent free fonts are available on the web, and more are coming.

    CSS at 10, the article that started the unblocking of real fonts on the web, cites two great designers of absolutely free fonts: Dieter Steffmann and Ray Larabie.

    Check Fonts Available for @font-face Embedding as well.

  28. Thanks for the update, Jeffrey. You’ve become the go-to guy for @font-face news!

    I’m happy to hear that you’ve tried a few of these font-serving services in private betas & that they seem to be great. But I’ve got some concerns about any approach which demands third-party input:

    What happens when/if the font supplier ceases operations? I’m thinking of similar occasions for people who’ve purchased DRM’d music & found that when the service dies, so does their access to their music.
    What happens if font supplier gets extraordinarily busy? Or when their servers suffer downtime?
    What are the bandwidth demands on the site & how does that effect the end-user’s experience?
    When they tweak their code—as they inevitably will—what assurances will we have that they’ve tested it for errors? Some of the sites we’ve created have been repeatedly bitten by bugs generously supplied by GeoTrust where functionality has been compromised.

    Of course, in each of the examples cited above, the sites we create will still operate: they’ll just look like ass, or at least a bit assy. But this may be a small issue with some of your readers :)

  29. Nice post Jeffrey! I found this at Randsco.


    /* IE6/7/8 - Must be first */
    @font-face {
    font-family: yourFontName ;
    src: url( /location/of/font/FontFileName.eot );
    }

    /* FFx3.5/Safari/Op10 - Next */
    @font-face {
    font-family: yourFontName ;
    src: url( /location/of/font/FontFileName.ttf ) format("truetype");
    }

    /* THEN use like you would any other font */
    .yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
    }

    More on the code and description at – Randsco

  30. Ditto on the code Ken just shared. No conditional comments needed.

    Also I just posted on a lot of the same ideas you shared here, Jeffrey. The direction forward with web fonts. I question the efficacy of TypeKit and put my support behind EOT-Lite, which offers a little something for everyone and is ready to use in IE today.

  31. DRM is obviously bad, and people have been shown to be relatively good at not uploading fonts to their websites and telling people to download them.

    I wonder, then, how long it will take for the foundries to give us modified ‘+web’ licenses, such as Font Bureau’s extra 20%, with a package to basically host a TypeKit from our own sites. (TypeKit could have a set-price for their service, which would help people protect their other fonts and such, too.)

    That would knock off the monthly fees, and we could always take the TypeKit implementation and the font files off our server and still use them on our computer, for print, as the license allows.
    This would also solve scalability problems, because the files would be hosted on your own server instead of on TypeKit’s server.

  32. Excellent free fonts are available on the web, and more are coming.

    CSS at 10, the article that started the unblocking of real fonts on the web, cites two great designers of absolutely free fonts: Dieter Steffmann and Ray Larabie.

    Check Fonts Available for @font-face Embedding as well.

    Thank you for the links, Jeffrey. This will help me very much so.

  33. The problem isn’t really MS if you can use code to use the same font for both IE and non-IE. Of course, no one likes CSS hacks, but they still work.

    I’ll just use Verdana. :(

    The foundries aren’t going to make money from Web developers until Web developers feel they can use something besides Verdana. Only graphic designers feel they can get creative with fonts, and are therefore the only customers for new and custom fonts right now.

    The foundries should open up 100 Web-readable free fonts that will be bundled with new browsers, OS and wherever else, just to force compatibility (or Web developers will be afraid to use them).

    As a backup, Webmasters can embed through CSS one of these free fonts for those who wouldn’t already have it (old computers). Fonts are a big download for a Web page already, so it shouldn’t download if the user already has it.

    After you’ve got a Web with 112 different fonts, Web developers will break free from not only Verdana, but from the 112 fonts they have on their PC and want something custom from the foundries.

    The real Web designers trying to build a brand and identity will have no issues with paying $68 for a font a Web user isn’t likely to see on another site and they know will be fully compatible with all browsers.
    This is the “font family 416 bold” font we have chosen as the official typeface to represent brand-x. No one else is using it and its curvy lines are in sync with our feminine product. We are very proud to be using this font for our identity. Look how it defines our site from the font alone.
    There will be a push in marketing for Web fonts. Right now, let’s all use Verdana. Nobody expects something unique. I don’t see how everyone using Verdana is helping the font creators.

  34. Seems like a total nightmare with legality with anything web font based.

    Like i can you image replacement to put a font like FF Unit on my site. Yet i’d have to purchase a special license to use a this solution or Cufon.

    Cufon is great actually, if not another anoying layer of javascript. Another thing to slow it down. Im coming to the realisation that great sites can exist just using the good old favourites of Arial, tahoma and so on!!

    Just imagine how nasty the internet would be if people could use whatever font they wanted!

    B

  35. I’ve used @font-face simply as a progressive enhancement tool for enabled users. When I first heard that Firefox 3.5 would be supporting it too I was excited that more users would experience the ‘enhanced’ version.

    Unfortunately it hasn’t turned out so well… On a Windows machine, Firefox 3.5 renders the type like crap (The font in question here is Fontin) to the point it was unreadable, especially for body copy.

    I’ve since settled back on a standard font stack and am now wondering if there will ever be a workable solution to this issue.

    Even if a standard is settled on, will the browsers render these fonts correctly?

  36. Jeffrey,

    Why are so many bending over backwards for font foundries? Though I’m not fond of the title, I’m with Mark on this issue.

    As of 30-Jun-2009, cross-browser font-embedding using CSS arrived. It’s available to the masses. The hounds have been released!

    xBrowser Fancy Fonts (A Tutorial)

    Note to foundries: Better hustle up, because your ship is sailing.

    Cheers,
    -stk

  37. Internet Explorer can support only EOTs for as long as it likes, so long as it introduces support for format, local, font-weight, font-italic, within the @font-face rule. That way font-family will work as it is supposed to.

  38. Internet Explorer can support only EOTs for as long as it likes, so long as it introduces support for format, local, font-weight, font-italic, within the @font-face rule. That way font-family will work as it is supposed to.

    EOT removes hinting and does other things that makes fonts look crappy. Why should IE users have a worse visual experience than other people? If I use a licensed web font (as I have here), only to discover that it looks bad in IE despite all the font-maker’s expertise, it makes me question whether web fonts are really ready for prime time.

Comments are closed.