Let me introduce you to the best way to do your @font-face definitions:
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url('GraublauWeb.otf') format('opentype');
}I'll circle back to why this is the best possible solution but let's first review the other techniques' weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf. Okay, let's see what we got here…
Conditional comments (via)
<style type="text/css" media="screen">
@font-face{
font-family:'Graublau Web';
src: url('GraublauWeb.otf') format('opentype');
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:'Graublau Web';
src: url('GraublauWeb.eot');
}
</style>
<![endif]-->Ugh. Seriously? We'd have to drop that in every html file or have unique iefonts.css files. No fun. Also, ugly.
Double declarations (via)
@font-face{
font-family:'Graublau Web';
src: url('GraublauWeb.eot'); /* here you go, IE */
}
@font-face{
font-family:'Graublau Web';
src: url('GraublauWeb.otf'); /* everyone else take this */
}The problem here is that, as Andrea points out, IE will actually download the .otf file. We can't have extra HTTP connections, so this is typically the solution:
@font-face {
font-family: 'Graublau Web';
src url('GraublauWeb.otf') format('opentype'); /* IE no comprende format()! */
}Because after all, IE doesn't understand the format hint, right? It's true. But what really happens is that IE does a request for this filename:
GraublauWeb.otf')%20format('opentype
Oops, looks like someone forgot a ? in their regular expression! But hey, a 404 is a lot better than grabbing a file that's 20-100k. Let's kill that 404:
Mo’ Bulletproofer (via)
@font-face{
font-family:'Graublau Web';
src: url('GraublauWeb.eot'); /* here you go, IE */
}
@font-face{
font-family:'Graublau Web';
src: url(//:) format ('no404'), url('GraublauWeb.otf') format('opentype'); /* tricky! */
}Richard Fink proposed this alternate syntax actually as a response to this post, but I've included it back here. The trick is to use url(//:), to prevent IE from 404'ing on the ttf/otf file. In his article he lists a few reasons why he prefers the semantics of this alternative. I understand the argument, but I don't like repeating myself, so I'm gonna keep trucking:
The local reference
@font-face {
font-family: 'Graublau Web';
src: url(GraublauWeb.eot);
src: local('Graublau Web Regular'), url(GraublauWeb.otf) format('opentype');
}Much more concise and clean. Here, non-IE browsers skip any .eot file and move on. IE will try to parse the second src value, but it can't understand the local() location nor the multiple locations, so it resorts to the EOT instead. Worth noting that IE will always dive to the last src:url() value to start, so this won't work.
src: url(GraublauWeb.eot);
src: url(GraublauWeb.otf); /* Yeah IE will only try this one. :( */
The other benefit.. if it just so happens that a user actually has your custom font installed, this'll save them the download. The one catch is that Safari on OS X will use only the Postscript name instead of the full font name; so when they differ, include both names:
Bulletproof @font-face
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url('GraublauWeb.otf') format('opentype');
}Bulletproof @font-face: Smiley variation
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('?')
url('GraublauWeb.otf') format('opentype');
}Added 2010.02.04: There has been concern over specifying local font names. The primary reason is that you cede control to the user's machine, potentially showing a locally installed font instead of the one you want to serve. While that will load faster, there's a very small chance the file could be wrong.
To account for this gotcha, I've specified a local font name of ☺. Yes, it's a smiley face. The OpenType spec indicates any two-byte unicode characters won't work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name. This technique is recommended if you think a locally installed version of this font is not in your best interest.
Demo
I've added a test page with a few syntax variants here for crossbrowser testing
Additional notes and gotchas:
- Including a
font-variant property inside the definition will cause it to not work in Safari (4.0.3 tested) as well as IE 6-8. (Thanks Sid)
- Including a
font-style property the definition is safe and the definition will still succeed with all browsers, however IE ignore what you define it as.But if you want a bold or italic style of a font to display, you'll need to make two definitions. Read the It Takes Two, Baby section on Nice Web Type's how to use css font face article
- Opera will fail if you do not use quotes (single or double) in your local() font name. So:
local('Use Quotes'). I've filed this bug with Opera as it's a spec violation. Thank you to Scott Kimler and Richard Fink for helping with the tireless research on Opera's quirks.
- Safari permission error? Some people experience a dialog asking for permission to use a local font. This only happens in webkit. [screenshot]
- Thibault Bardat-Bujoli indicated that this behavior is due to Linotype FontExplorer X. For any font added but not 'activated', it will intercept requests to use it. You can disable this behavior within the FontExplorer UI [jpg]. I have heard no reports of this behavior on machines lacking FontExplorer
- Chrome? A few rumors are going around that a Chrome beta or dev build has @font-face support. There is no install of Chrome that has @font-face enabled by default [actually, it's in dev builds now!], however you can enable it in Chrome 3 with an executable switch. I'm keeping this page on @font-face and Google CHrome up to date with all the details.
- You can feed FF, Opera and Safari a truetype but specify it as format('opentype') and it's just fine. So for all intents and purposes, if your font is opentype or truetype, the format hint is optional.
- The font name that specified in your @font-face declaration cannot exceed 31 characters in length. IE will fail on anything larger.
SVG? WOFF?
Since Google Chrome won't have typical @font-face support until version 4, we can snag it early by serving it SVG fonts. WOFF is a new format that is officially supported in Firefox 3.6 Can we integrate those into this syntax? Definitely.
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}The order of those is deliberate and discussed in the comments here. Hat tip to Snook for being the first to drag SVG into the party. Font Squirrel and Nice Web Type have also been very thoughtful in their work.
I'm confused and lazy. Help?
Want to absorb the benefits of this article instantly? Use Font Squirrel's awesome @font-face generator. It does all of this for you, and more. If you're less lazy, read through Nice Web Type's How To for all the deets.
Paul Irish front-end development, typography
Follow me on twitter: @paul_irish
![[screenshot]](http://img.skitch.com/20091201-cukfe92rgq9yu3pr74gmmkbbp8.png){kind=link}
![within the FontExplorer UI [jpg]](http://paulirish.com/wp-content/uploads/2009/09/font-explorer-font-request-settings.png){kind=link}