Can't understand the bulletproof @font-face CSS rule

Question

Before marking this as duplicate please read through my doubts. I searched thoroughly on the web(particularly stackoverflow) & couldn't get the doubts cleared. This question may seem lengthy at a glance but it contains crucial issues which others also want to know.

I'm trying to gain a slightly deep knowledge in the bulletproof @font-face rule and the people out there are confusing me. Please suggest me on this guys. So, here's the latest bulletproof code as suggested by Font-Spring (http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/) along with the IE9 compatibility mode issue solved:

@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 */
}

The one without the IE9 Compatibility Mode Fix, also by Font-Spring(http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/), looks like this:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

Currently, I'm reading a book "The Book Of CSS3" by Peter Gasston. It follows the bulletproof rule with IE9 Compatibility Mode fix as stated by the Font-Spring. He says that the rule with a query string ? in the second src property is responsible for IE9 Compat. Mode fix. But, font-spring holds the first src property responsible for IE9 Compat. Mode fix. I'm not able to learn this syntax without understanding it completely.

My serious issues are rather smaller. First of all I wanna know if only the ?#iefix can prevent the parsing error or it could be something like ?iefix (without #) or it could be ?xyz or ?#abc. Is it necessary to write exactly ?#iefix?

Secondly,

• I can't feel how this @font-face rule gets parsed, how IE8 decides which of the src properties is to be used for eot font. And if IE9 has no issues with parsing even in the compatibility mode, how will it decide which font-format to use? Will the IE9 in compatibility mode break on query string font url & if not then why not?
• Can somebody tell me if I look at the whole bulletproof rule stated above, how IE8, IE9 in compatibility mode, IE9 in normal mode & other browsers will parse it? How will a browser decide from several fonts which one to use if it supports majority of them. What is the order in which the browser looks url values and src properties?
• Is it like that an alone src property without any local() and format() values and with a correct eot format will be accepted by IE8 and it will not go further to the next src property in which other formats are defined? Or will it still go to the next src property & download fonts from there?
• If there will be a query string (?) in the next src property, will IE8 (IE9 in compatibility mode considered as well) download the eot font two times? And if there will be no query string, then will it accept the eot font from first property and won't break or will it break & don't apply any custom defined font even from the first src property?

Also, does IE9 in normal mode support eot format? Won't the bulletproof syntax still work if I just remove the whole query string declaration like:

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

Won't the above still work in all the possible cases? IE6-8 will have the first src along with the IE9 in compatibility mode and all other browsers will follow the rest of rules.

Would the above rule suggested by me work same with the local() value as follows:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE6-IE8 & IE9 Compat. Mode */
src: local('MyWebFont'), /* To fix IE6-IE8 and IE9 Compat. Mode */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Whether in IE8 or in IE9 compatibility mode, local() value will make them go away.. Would IE9 in normal mode use eot or woff from above rule?? If it does use eot, can we make a slight change to first src property like this:

src: url('webfont.eot?#iefix') format('eot');

IE9 will ignore this property as it contains eot and move on further to use woff, am I right? Also, if I again make a change to this rule itself like this:

src: url('webfont.eot?#iefix') format('embedded-opentype');

Would IE9 now use eot format or still go on with woff?

This is all I want to know and yes I think these questions definitely need an answer.

Answer 1

@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 is simply a trick to workaround the various IE* inconsistencies, with the first src you satisfy IE9, so if your viewer has this browser he gets this font, the second src doesn't overwrite the first one because IE9 isn't able to parse the 'webfont.eot?#iefix' string

About the second src of the rule: that is the "old" bulletproof syntax and you are already familiar with it. Please note that, as said in the blog post of Fontspring about the hardened rule, Microsoft fixed the bug in IE9 when using IE7 and IE8 render modes but they didn't actually fixed IE7 and IE8 so you still need this trick for these browsers.

A clarification about local(): this tell to the browser to use a certain local (i.e. on the pc of the viewer of the page) available font, if your viewer doesn't have it installed then he'll not be able to see the right font, for more info about this you can check this: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley