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'),
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
Thanks for share… saved for posture use on my web site!
Thanks for a short article. :)
Oh Thanks Jeffrey. Clever tip
Social comments and analytics for this post…
This post was mentioned on Twitter by rtmate2: RT @zeldman Bulletproof @font-face http://bit.ly/5kyXzD…
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");
}
I was using that way. Thanks for share Jeff.
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.
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.
Xavier, could you define ‘quirky’?
@DN quirky as in reverting to default system fonts as defined in the font stack when clicking on links/changing pages.
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.
Paul is the best. This syntax has been very reliable and up-to-date—Paul has continued to revise and annotate his “Bulletproof” post.
@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!
@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
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.
bah. Screwed up the link: @font-face kits
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.
[...] Bulletproof @font-face – Jeffrey Zeldman Presents The Daily Report SAVE [...]
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-familychanged 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.[...] Bulletproof @font-face – Jeffrey Zeldman Presents The Daily Report 1 Vote [...]
[...] 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'), [...] [...]
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…)
[...] 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 [...]
[...] Bulletproof @font-face from: Jeffrey Zeldman Presents The Daily Report on 2 Dec 2009 [...]
Just that all browsers support this font feature.
[...] Bulletproof @font-face [...]
[...] 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. [...]
[...] Bulletproof @font-face from: Jeffrey Zeldman Presents The Daily Report on 2 Dec 2009 [...]
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.
[...] ting på A List Apart. På bloggen hans deler han sine fjerne og nære tankar om alt mogleg, frå vevkoding til meir kvardagslege [...]
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
[...] 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) [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]