2 Dec 2009 7 am eastern

Bulletproof @font-face

Zeldman

Real type on the web. All the kids are doing it. But maybe we’re doing it wrong. After testing several CSS @font-face syntax variants, including one used on this site, Paul Irish says the following is clearly best:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'), 
         url('GraublauWeb.otf') format('opentype');
      }

Read more: “Bulletproof @font-face syntax” at paulirish.com.

Filed under: CSS, Design, Real type on the web, webfonts, webtype

35 Responses to “Bulletproof @font-face”

  1. designi1 said on

    Thanks for share… saved for posture use on my web site!

  2. Larry Ball said on

    Thanks for a short article. :)

  3. Nick Plekhanov said on

    Oh Thanks Jeffrey. Clever tip

  4. uberVU - social comments said on

    Social comments and analytics for this post…

    This post was mentioned on Twitter by rtmate2: RT @zeldman Bulletproof @font-face http://bit.ly/5kyXzD

  5. Xavier said on

    After long testing, I have found the following code to be working flawlessly in more browsers. The code you posted resulted in quirky behaviour in Opera. The following is working well in Firefox, Safari, Opera, Chrome and IE…


    /* IE */
    @font-face{font-family:Museo; src:url(../fonts/Museo700-Regular.eot);}

    /* non-IE */
    @font-face {
    font-family:Museo;
    src:url(//:) format("No-IE-404"),
    url(../fonts/Museo700-Regular.otf) format("opentype");
    }

  6. iPad said on

    I was using that way. Thanks for share Jeff.

  7. Antoine E Butler Sr said on

    I’ve all but given up on using @font-face successfully. I’ll give it another go with a yet to be release site today.

    Thanks for sharing.

    ps. I’m curious, could the actual font file being used, in my case a TTF, cause wonky rendering? Or is it solely the fault of how the font is implemented.

  8. Jeffrey Zeldman said on

    could the actual font file being used, in my case a TTF, cause wonky rendering?

    Yes. Most fonts have not been optimized for screen display (let alone for screen display across platforms and versions). Most font shops I’ve spoken with are working on this problem right now. Everyone knows it’s the lumbering hippopotamus in the room. Mac-based designers like me didn’t recognize this problem immediately because, whether optimized for screen display or not, the damn fonts look so good in Mac OS X, thanks to Apple’s type-handling finesse.

    In addition, there might actually be something wrong with the font you’re using. I wouldn’t know about that. But assuming the font is perfectly fine, it might still display poorly in some browsers, some font-smoothing environments (or non-font-smoothing environments), etc.

  9. DN said on

    Xavier, could you define ‘quirky’?

  10. Xavier said on

    @DN quirky as in reverting to default system fonts as defined in the font stack when clicking on links/changing pages.

  11. Paul Irish said on

    Xavier, Yeah. Richard Fink, who wrote that syntax, claimed similar behavior but I’ve never seen anything like it.
    I do know that in Opera 10.10 (came out a week ago or so) were a number of fixes for their @font-face support, so I’m curious if any such quirkiness would be gone now.

  12. Tim Brown said on

    Paul is the best. This syntax has been very reliable and up-to-date—Paul has continued to revise and annotate his “Bulletproof” post.

  13. Xavier said on

    @Paul maybe I should do some version testing. I do remember that I was using an SVG file as well (as advised by Jonathan Snook), it might have had something to do with that.

    I’ll test it again when I find the time, it’s been a couple of months, so I’ll have to dig up some code!

  14. Richard Fink said on

    @xavier, Paul Irish, and all:

    @font-face {
    font-family:Museo;
    src:url(//:) format(“No-IE-404″),
    url(../fonts/Museo700-Regular.otf) format(“opentype”);
    }

    My tests continue to show that this, so far, is the only syntax that doesn’t leave Opera choking. And, in keeping with Jon Tan’s oft-linked-to code that recommends dividing the declarations between IE and “other browsers” using conditional comments (which I think is a good idea – almost inevitable), something needs to be done to prevent IE from making unnecessary HTTP requests resulting in a 404 as it attempts to parse the rules for the “other browsers”. I also continue to not like being forced to use local() because it serves a hidden purpose other than it’s intended one.
    It’s very helpful for those trying to use @font-face to know at least a little bit about what’s going on under the hood with different browsers as those browsers go about parsing the @font-face declarations.
    Paul’s post is required reading. But as counterpoint – hold on, shameless self-promotion approaching – so is mine:Mo’ Bulletproofer Font Face CSS Syntax.
    Between the two, you’ll get a good idea of what’s going on. And you’ll have more options. Paul’s post and Readable Web’s cross-link.

    rich

  15. Andy Ford said on

    Font Squirrel has some excellent pre-packaged @font-face kits that include all the font files and the CSS. The selection is more quantity over quality but there are a few nice typefaces in their collection. They also have an @font-face generator that allows you to upload a TTF or OTF font file to generate your own kit.

  16. Andy Ford said on

    bah. Screwed up the link: @font-face kits

  17. jen said on

    With all this handy-dandy fancy @font-face talk, don’t forget that it will likely be lost on any mobile device (apart from the iphone), so make sure the pages render usefully for them.

  18. Popular Bookmarks on Delicious said on

    [...] Bulletproof @font-face – Jeffrey Zeldman Presents The Daily Report SAVE [...]

  19. Billee D. said on

    Thanks for sharing, Jeffrey. That is very similar to what I have been using lately. However, I have recently discovered that in Firefox 3.5, if the typeface you want to embed is listed in quotation marks it will prompt you to use the font. So the following will prompt the user to allow the font to be used:

    @font-face {
    font-family: ‘Bergamo Std Regular’;
    src: url(‘/stylesheets/typefaces/bergamo-std/BergamoStd-Regular.eot’);
    src: local(‘Bergamo Std Regular’), local(‘BergamoStd-Regular’), url(‘/stylesheets/typefaces/bergamo-std/BergamoStd-Regular.otf’) format(‘opentype’);
    }

    While this doesn’t prompt the user:

    @font-face {
    font-family: BergamoStdRegular;
    src: url(‘/stylesheets/typefaces/bergamo-std/BergamoStd-Regular.eot’);
    src: local(‘Bergamo Std Regular’), local(‘BergamoStd-Regular’), url(‘/stylesheets/typefaces/bergamo-std/BergamoStd-Regular.otf’) format(‘opentype’);
    }

    Notice that the font-family changed and I removed the quotes. Your mileage may vary, but I thought it worth mentioning here. I know it was starting to annoy the hell out of me.

  20. Bulletproof @font-face – Jeffrey Zeldman Presents The Daily Report - Mixx said on

    [...] Bulletproof @font-face – Jeffrey Zeldman Presents The Daily Report 1 Vote [...]

  21. CREDITBOARDS.COM - News Feeds said on

    [...] Bulletproof @font-face Real type on the web. All the kids are doing it. But maybe we’re doing it wrong. After testing several CSS @font-face syntax variants, including one used on this site, Paul Irish says the following is clearly best: @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), [...] [...]

  22. Lars Gunther said on

    Now with the Fox 3.6 soon coming, no discussion about fonts on the web should be without the mention of WOFF!. (Yes I know Jeffrey was not planning to discuss formats…)

  23. Bulletproof @font-face | Web Developer said on

    [...] src: local(’Graublau Web Regular’), local(’Graublau Web’), [...]Continue reading from the source. Share Design css, Design, real type on the web, webfonts, webtype Adobe’s plugin [...]

  24. Shared Items on December 4, 2009 said on

    [...] Bulletproof @font-face from: Jeffrey Zeldman Presents The Daily Report on 2 Dec 2009 [...]

  25. Goran Aničić said on

    Just that all browsers support this font feature.

  26. Wayne State Web Communications Blog » Blog Archive » [Friday Links] The Foxy Edition said on

    [...] Bulletproof @font-face [...]

  27. Bulletproof @font-face | geedew :: Web Design, Programming, Professionalism said on

    [...] By Drew | Published: December 7, 2009 There is quite an interesting discussion going on at Jeffrey Zeldman’s blog concerning the @font-face syntax and how to make sure that it is working in all browsers. [...]

  28. Shared Items on December 9, 2009 said on

    [...] Bulletproof @font-face from: Jeffrey Zeldman Presents The Daily Report on 2 Dec 2009 [...]

  29. Tim Brown said on

    In case anyone is looking for this kind of resource, my post How to use CSS @font-face goes throughPaul’s Bulletproof method line-by-line, and includes advice/resources from other talented folks like Håkon Wium Lie, Jonathan Snook, and Ethan Dunham.

  30. Luke 11: Jeffrey Zeldman › the unborn chikken said on

    [...] ting på A List Apart. På bloggen hans deler han sine fjerne og nære tankar om alt mogleg, frå vevkoding til meir kvardagslege [...]

  31. adi said on

    i am using the same technique for “myriad pro” but not coming in any browser. I have already uploaded eot & ttf files on the server and calling them…..please help

    in my css file following code are there :-
    @font-face{
    font-family:Myriad Pro;
    font-weight:normal;
    src: url(http://images.techtree.com/ttphase3/images/font/MyriadPro-Regular.eot);
    src: url(http://images.techtree.com/ttphase3/images/font/MyriadPro-Regular.ttf) format(”truetype”);
    }
    body {background:#c1c1c1;margin:0;font-family:Arial, Helvetica, sans-serif;}
    h1 {font-family:Myriad Pro,Arial, Helvetica, sans-serif;font-weight:normal;font-size:30px;padding:0px 0px 3px 5px;color:#000;margin:0;}

    i am using h1 in the html page which is attached to the mentioned css

  32. Twenty-ten type | i love typography, the typography and fonts blog said on

    [...] forget Baseline Magazine. Looking forward to reading the latest issue, ‘Going Dutch’:Type linksBulletproof font-face Designing for the switch Lost Caslon type Some type of wonderful Font of Champions (League) [...]

  33. Twenty-ten type - WEMAKECHANGES said on

    [...] Bulletproof font-face Designing for the switch Lost Caslon type Some type of wonderful Font of Champions (League) Typeface Development Bundle for TextMate Fonts in Time and Space ‘The End’ title stills from Warner Bros [...]

  34. Twenty-ten type | i love typography, the typography and fonts blog said on

    [...] forget Baseline Magazine. Looking forward to reading the latest issue, ‘Going Dutch’:Type linksBulletproof font-faceDesigning for the switchLost Caslon typeSome type of wonderfulFont of Champions (League)Typeface [...]

  35. Twenty-ten type | More On Design said on

    [...] Bulletproof font-face Designing for the switch Lost Caslon type Some type of wonderful Font of Champions (League) Typeface Development Bundle for TextMate Fonts in Time and Space ‘The End’ title stills from Warner Bros [...]

Comments off.