F Blog Home

Further Hardening of the Bulletproof Syntax

February 21, 2011

For context, please read our earlier post about this syntax.

A potential looming problem with the new syntax we introduced earlier this month was raised by Microsoft. The soon-to-be-released IE9 comes with a feature that allows it to render in both IE7 and IE8 Modes. In these two modes, Microsoft 'fixed' the parser bug that affected the actual IE7 and IE8. This fix breaks the @font-face syntax for those compatibility modes.

Extra Bulletproofiness

Therefore, in the interest of forward compatibility, we're recommending a tweak to the syntax to address this issue.

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

This syntax is exactly the same as our previous iteration with the addition of a second 'src:' attribute that specifies the EOT again. We'll leave it up to you to decide if this is necessary.

It certainly mucks the code which we worked hard to clean, but you gotta do what you gotta do.

Browser compatibility

Safari, IE 6-9, IE 9 Compatibility Modes, Firefox, Chrome, iOS, Android, Opera

42 Comments

Ruana

Oh my.... keeping up with everything that happens in - and to - the web developer community has really become a full-time job! There's almost no time left for working on the stuff that pays my bills.

An increasing number of my clients have begun to ask for specified fonts to upgrade their web sites. It seems that not only the developers are bored by the limited possibilities. It's essential - and about time - that we are given the ability to safely (read: compatible, esp. IE and Android) embed web fonts in our web sites.

That 'fix' for the IE 9 parser bug is so typical for Microsoft - and again it's left to the developers to deal with the problems and complications that will come from it.

However, I'm thankful for the help people like you offer the "average" web designer who usually is not that much of an expert when it comes to font development and their browser/css implementation.

February 21, 2011 at 06:21 PM

Jonatas Miguel

One more line isn't so bad, it's still an elegant solution IMHO. Great job guys and gals. :)

February 22, 2011 at 12:37 PM

Paul Irish

To keep your site protected from falling into a compatibility mode use:
<meta http-equiv="X-UA-Compatible" content="IE=edge">in your markup. Then you're safe from this and many other gotchas.

February 22, 2011 at 02:09 PM

Seth Stahlman

This way doesn't prevent IE 8 from doing that crap where it shoves junk after the ?. (ie, the "?iefix)20%format('eot'")

The best way really seems to use the two separate @font-face declarations (aka mo' bulletproofer + extra eot); IE then cleanly requests the .eot file (as seen in Fiddler) and gets its application/vnd.ms-fontobject.

I'll second Ruana's gratefulness; I'm a newbie when it comes to using webfonts; it's unfortunate Internet Explorer yet remains a burr in the side of anyone trying to do clean development.

On a tangent, is the consensus, due to the Android issues, that local() shouldn't ever be used, requiring a font download each time one visits a site with @font-face?

February 24, 2011 at 02:50 AM

Ethan Dunham

@Seth- Not following your question about Android. Local() does cause Android to choke which is one reason we pursued an alternative method.

February 24, 2011 at 02:34 PM

Seth Stahlman

Right, so there's no safe way of using local(), and without using it, the remote url is always queried (and font downloaded), for all browsers?

February 24, 2011 at 06:07 PM

Brett

Interesting, thanks for the clarification and update Ethan! I see Font Squirrel's syntax has also been updated, very cool!

February 27, 2011 at 10:24 AM

Richard Fink

I second Paul's recommendation to use the IE metatag.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
One extra line to a page, hurts nothing, and forces IE8, 9 and above to use the most standards compliant rendering mode it's got, and thereby this syntax will work with the first src descriptor or even without it. Standards-wise, no reason why it shouldn't. I'll be updating my post on Readable Web with this new variation.
Time to stick a fork in it, it's done.

February 27, 2011 at 08:14 PM

Stephanie (Sullivan) Rewis

Thanks for this, guys. And thanks to Paul for reminding me of the edge meta. That will be my choice for handling this.

February 28, 2011 at 11:39 AM

iDGS

What'm I missing? Neither W3C nor NU validator likes
<meta http-equiv="X-UA-Compatible" content="IE=edge" />Saying, e.g.,

<samp>
Bad value X-UA-Compatible for attribute http-equiv on element meta.
</samp>

P.S. Also, I was absent the day they explained how to put a smiling photo beside my comment. Hint, please?

February 28, 2011 at 07:37 PM

Ethan Dunham

@iDGS - gravatar.com is your friend.

February 28, 2011 at 09:08 PM

iDGS

@Ethan - Thank you! :-)

March 1, 2011 at 02:20 AM

Ahmad Alfy

Hey what is the iefix I see at the end of the url?

src: url('myfont-webfont.eot?iefix') format('eot')

Does this need a Javascript or it will work if I just implemented that?

March 2, 2011 at 07:51 AM

Ethan Dunham

The 'iefix' at the end is not necessary, but is meant more to 'anchor' the question mark and comment on its meaning. The thought was that it would be a visual clue that this part is required to fix an IE issue.

March 2, 2011 at 09:39 AM

blowski

Does this work with big fonts without ClearType turned on (as is default on Win XP)? I've tried using the fontsquirrel generator, but big bold headers look terrible and thus the code is unusable if Win XP users are taken into consideration.

March 2, 2011 at 11:04 AM

Toby

Hi Ethan!

Thank you for your update, great work!
One question: You've always set a TTF-font in your syntax. Are there any (dis)advantages to use OTF instead of TTF fonts in the @fontface?

March 2, 2011 at 12:04 PM

John

@Toby: OTF offers special features like ligatures. Those are not supported everywhere though.

@bloswki: your font-face syntax has no impact on the quality of fonts. Pretty much any font will look terrible with ClearType disabled. But IE7 uses it by default, the only browser that gets no ClearType is IE6 when it's disabled system-wide - and afaik XP SP3 shipped with CT enabled by default.

March 2, 2011 at 12:59 PM

Seth Meranda

What is the process for each browser in terms of font-file downloading? Will the browsers download all the files, even though they only uses one?

March 7, 2011 at 01:59 PM

Ethan Dunham

@Seth - Browsers start with the last src: declaration and look for the first font it can load. In IE9's compatibility mode's case, it fails on the last src, so it moves up to the previous src. As far as we've tested, browsers only download what they need.

March 7, 2011 at 03:13 PM

David

Well, but I prefer to give compatibility to older versions of Firefox, Safari and Opera, with my fonts working well using the old smiley technique I think this is more important for me than have Android compatibility. It's a shame that the new syntax doesn't serve webfonts to FF 3.5, Safari 4 and Opera 10.5.8. What you think about this?

March 8, 2011 at 02:10 PM

Ethan Dunham

@David- This syntax does indeed support those browsers.

March 8, 2011 at 02:11 PM

David

Oh, it's true, so sorry! I forgot to change one letter on the font name and I thought it doesn't work due to the compatibility list of browsers you mention on www.fontspring.com/blog/the-new-bulletproof-font-face-syntax . Now that's totally perfect. Thank you!

March 8, 2011 at 02:57 PM

Gabby

Hi, just wondering... I used the EXACT same code, but the font only shows up in IE9 when in compatibility mode (and the coding all messed up, I might add). Is it supposed to do that?

March 19, 2011 at 08:49 AM

Charles Scott

Hi I know this might be a very stupid question, but here it goes: how the structure of the site works?. public_html/css/stylesheet.css and the fonts are in public_html/fonts/MywebFont Folders/, When they describe put your fonts in or near your CSS folder means: all the loose files for the different fonts or they can be as above in a fonts folder with each fontfamily in its own folder inside the "/fonts" folder?
Second question: where do I declare where the fonts are in my site? in the HTML code or in the stylesheet.css where you have: src: url('myfont-webfont.eot?') format('eot'), should I replace url by: /fonts/oneWebFont/'myfont-webfont.eot?') format('eot'),.
Sorry I am new at this and just trying to understand, thanks for any help

March 22, 2011 at 06:19 AM

Ethan Dunham

@Gabby - URL we can see?

@Charles - Yes you can put the fonts anywhere on the public side of the server. You declare the location in the CSS just as you posted.

March 22, 2011 at 10:49 AM

Charles Scott

Thanks Ethan! I will try, but this is incredible!!! super job!

March 22, 2011 at 11:31 AM

Evert

In addition to the very good tip of adding the x-ua-compatible header, I would recommend doing this using htaccess. It keeps your html clean and adds the header automatically when needed.
Something like this will do the trick:

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    <FilesMatch "\.(html|htm|php)$">
      BrowserMatch MSIE ie
      Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
   Header set imagetoolbar "no" env=ie
    </FilesMatch>
    Header append Vary User-Agent
  </IfModule>
</IfModule>

March 24, 2011 at 09:27 AM

Stuart

I really like this syntax but I've run into problems with IE9. The issue is not around the compatibility modes, rather that the correct font just doesn't show in IE9 standards view.

If I remove the second src declaration completely the font displays fine. Anyone else encountered this issue?

March 25, 2011 at 07:52 AM

Andre Morgan

Lovely post

March 28, 2011 at 04:16 PM

Carmen Cardoza

@Stuart

This syntax was a lifesaver as I couldn't get my embedded font to show up in IE9, however I did have to remove/edit/add some parts in order to show the font in ALL the browsers.

MY VERSION (Included 'local' source, removed format for eot?iefix source, removed#svgFontName:
@font-face {
font-family: 'England';
src: local('England'),
src: url('font/England-fontfacekit/england-webfont.eot'); /*ie9*/
src: url('font/England-fontfacekit/england-webfont.eot?iefix'), /*ie6-ie8*/
url('font/England-fontfacekit/england-webfont.woff') format('woff'), /*modern browsers*/
url('font/England-fontfacekit/england-webfont.ttf') format('truetype'), /*safari, etc*/
url('font/England-fontfacekit/england-webfont.svg') format('svg');}

ORIGINAL VERSION:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot'); /* IE9 Compat Modes */
src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
url('myfont-webfont.woff') format('woff'), /* Modern Browsers */
url('myfont-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Thanks, @Paul Irish for the <meta> tag!

March 29, 2011 at 01:24 PM

Luka Cosic

It really feels like the web designers and browser developers are against each other!

April 2, 2011 at 08:04 PM

Koen Maes

Super !!!

April 5, 2011 at 09:35 AM

Tonttu

Using Firebug (Net-feature) in FF4 I'm seeing the browser downloads the "eot?iefix" AND the woff-file. Am I the only one or can someone confirm this?

April 5, 2011 at 09:48 AM

Marc

@ tonttu
Because of your comment I've tested that case with FF4 and Chrome 10 and it loads only one woff font (both ordered by name, font name is "newdetroit"):
www.maxrev.de/img/1/page.gif

But my test showed that FF4 is loading the font file on every impression (Chrome showed 304 Not modified in the list).

April 7, 2011 at 01:59 PM

Tonttu

Excuse me, my fault, somehow I had erased format('eot'). But hey: at least you discovered that issue of FF4 not caching! I only get 304 in FF, if I hit F5. Otherwise it downloads the font again.

April 8, 2011 at 12:25 PM

Christie

@Carmen

Thank you so much for your code - I was having issues getting my fonts to load in IE9, but that worked perfectly.

Just wish I found this earlier! :)

April 15, 2011 at 09:48 AM

Tonttu

Ah, now I realized why I erased format('eot'): I used Carmen's version :)
So Christie, be sure to use Firebug to see, if Carmen's code is causing Firefox to uselessly download the eot-file.

April 17, 2011 at 09:07 AM

Raf

I couldn't get any of these versions of the syntax to render fonts in IE9. Every other browser works fine.
I ended up forcing IE9 to render as IE8 with the compatibility meta tag although I hate to have to use this solution :(

Why oh why doesn't the fontsquirrel css work for me, I have tried a bunch of things I found here and on the internetz without luck. I'm out of idea's, anyone got any?

ps: even the demo pages you get with the fontsquirrel webfont kits don't work in IE9, at least not when I upload them to my server. Could it be that it has to do with the fact that the websites are on a windows server?

April 21, 2011 at 04:21 AM

Raf

Never mind my previous comment.

I tried Carmen Cardoza's syntax again and it worked. Went over it one bit at a time :)
Guess I had been trying for so long I missed some little typos.

Thanks again Carmen!

ps: I think fontsquirrel would do good to revise their css...

April 21, 2011 at 04:48 AM

Ethan Dunham

@Raf - Unintended consequences. With our syntax served on IIS, IE9 tries to load the WOFF. But since WOFF is not a default MIME type it 404's. If you add WOFF to your IIS config, it'll work.

April 21, 2011 at 09:38 AM

Scott Shumaker

This just doesn't work on IE8. Renders great in every other browser. Inspecting the CSS in IE Developer Tools even shows it picking up the font-face declaration. Just doesn't render. Serving from Apache on MacOS X, using MAMP.

@font-face {
font-family: 'MuseoSlab500';
src: url('Museo_Slab_500-webfont.eot');
src: url('Museo_Slab_500-webfont.eot?iefix') format('eot'),
url('Museo_Slab_500-webfont.woff') format('woff'),
url('Museo_Slab_500-webfont.ttf') format('truetype'),
url('Museo_Slab_500-webfont.svg#webfontyumMOUTD') format('svg');
font-weight: normal;
font-style: normal;

}

April 28, 2011 at 01:14 AM

Jay

Am I just being picky in pointing out that this CSS syntax won't pass the W3C validator?

May 17, 2011 at 05:46 PM