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.

35 thoughts on “Bulletproof @font-face”

  1. 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");
    }

  2. 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.

  3. 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.

  4. 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.

  5. @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!

  6. @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

  7. 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.

  8. 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.

  9. 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.

  10. 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

Comments are closed.