Example from the [CSS] Ninja

Font face in your face.

Fontspring introduced an improved syntax for the bulletproof syntax. The genius was in a parser bug in IE<9 that would stop reading a font-face at-rule if it came to a hash (#), it would think it was a url fragment and stop parsing from there. Turns out the hash stops it from loading locally in IE Ethan has changed it to a question mark (?) to fix this.

I wasn't happy with the fact that IE9 still downloaded the EOT font when it happily supports the WOFF format. So a little hacking and we have a slightly modified version that will download the WOFF font in IE9.

Update: In order to get around the issue where the font won't load if you change the rendering mode of IE9 there needs to be two src declerations.

Another tip is to add <meta http-equiv="X-UA-Compatible" content="IE=edge"> meta tag to protect it from falling into compatibility mode.

@font-face {
    src: url('Ubuntu-B.eot');
    src: url('Ubuntu-B.eot?') format('☺'),
        url('Ubuntu-B.woff') format('woff'),
        url('Ubuntu-B.ttf') format('truetype'),
        url('Ubuntu-B.svg#webfontssbCkuz5') format('svg');

What's different you ask? Take a look at that second hash in the eot reference Ethan has modified this syntax slightly to change the format to eot which does the same thing as the hash. So I thought why not bring back the smiley face!. Seriously that's it IE9 will now happily skip the EOT and grab the WOFF version, woo!

Font used is Ubuntu Bold