New bulletproof syntax @ font-face

From the very beginning of the “web-font revolution,” we relied on the inelegant hacks of @ font-face declarations so that fonts from the Web would be loaded in all browsers. Can there be a better way? Fully elegant and compatible with future browsers?

Briefly about the background

In September 2009, Paul Irish announced the bulletproof syntax for writing @ font-face declarations . The syntax was compact and worked in all browsers at that time. Recently, complaints about the refusal of fonts to load into Android began to come in over time, so we instead recommended the syntax of “ Mo 'Bulletproofer ”, written by Richard Fink. Unfortunately, the syntax “Mo 'Bulletproofer” requires double entry of declarations, so support is more difficult.

Syntax Fontspring @ Font-Face

But this code should be from the very beginning. Clean, clear and simple:

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

What? I did not understand.

Hack The trick that makes this code work is the “?” Character after the EOT file name. No kidding.

How does that work

Internet Explorer (in versions earlier than the ninth version) contained a bug in the “src” value handler. If you put more than one font format in “src” , then IE will not be able to load it and will report a 404 error. The reason is that IE tries to use everything that is written after the first opening bracket and up to the most recent closing bracket as the file address. To overcome this incorrect behavior, simply define EOT first and add a single “?” Character. It will deceive IE, which will think that the rest of the string is a query string , and will only load the EOT file. The rest of the browsers will follow the CSS specification — they will choose the format they need based on the sequence of “src” values ​​and the font format instructions.
')

Browser Compatibility

Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11.

What about fonts in “data: ...” addresses?

You can use this syntax to embed fonts in CSS style. However, for this to work, you need two declarations. Although, if you really went this way, does an extra declaration mean at least something? Also note that the format specification must be "embedded-opentype".

 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('embedded-opentype'); } @font-face { font-family: 'MyFontFamily'; src: url(data:font/truetype;charset=utf-8;base64,___BASE64) format('truetype'), url(data:font/woff;charset=utf-8;base64,___BASE64) format('woff'), url('myfont-webfont.svg#svgFontName') format('svg'); } 

Update 1 - February 3, 2011

The CSSNinja perfectly noticed how you can force IE9 to pick up the WOFF font instead of EOT. He suggested adding the “#” symbol to the indication of the EOT format. (This works because IE9 does not recognize the “# embedded-opentype” format specification.) To accommodate its discovery, I changed the above syntax. I replaced the embedded-opentype format with “eot”, which IE9 also does not understand and therefore moves on to where WOFF.

_{Translator's note: CSSNinja is also not standing still and suggested the entry "format (")) ". It is two characters shorter and is also a curtsey in the direction of Paul Irish, who first proposed the “local (”) ”entry to deceive IE.}

Update 2 - February 4, 2011

IE refused to load web-fonts when the page is open locally (from the reader’s disk). It turns out that IE prefers a question mark (the symbol "?"). Code changed to accommodate this. Initially, in this blog post, a magic grid (“#” symbol) was praised .