Simonrota.com

Since the beginning of the 'webfont revolution' we've relied on somewhat hacky @font-face declarations to get webfonts loading cross-browser. Could there be a better way? One that's clear and compatible with future browsers?

Short history

In September 2009, Paul Irish came up with the Bulletproof syntax for writing the @font-face declaration. It was compact and worked across all browsers at the time. Recent, growing complaints that fonts weren't loading in Android, led me to recommended the Mo' Bulletproofer syntax devised by Richard Fink instead. Unfortunately Mo' Bulletproofer requires double declarations. Defining each font twice in the CSS is cumbersome, so I looked for a better solution.

The “Fontspring @Font-Face Syntax”

The code should have been clean, clear and simple all along. Finally, it is:

@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');
    }

What? I don't get it.

The hack trick that makes this work is the '?' following the EOT filename. Seriously.

How it works

Internet Explorer <9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single question mark. The question mark fools IE into thinking the rest of the string is a query string and loads just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.

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 data uri fonts?

You can use this syntax as well to embed your fonts into a stylesheet. For it to work does require two declarations however. But if you are going this route, what is an extra declaration? Note that the format hint for the EOT needs to be 'embedded-opentype.'

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

Merci à Fontspring.com pour cette excellent article

Pour mon site voici ma déclaration CSS pour IE 7 8 9, Firefox, Safari, Chrome :

@font-face {
 font-family: 'Brush';
 src: url('/brushscriptstd-webfont.eot');
 src: url('/brushscriptstd-webfont.eot?#iefix') format('embedded-opentype'),
 url('/brushscriptstd-webfont.woff') format('woff'),
 url('/brushscriptstd-webfont.ttf') format('truetype'),
 url('/brushscriptstd-webfont.svg#Brush') format('svg');
 font-weight: normal;
 font-style: normal;

}


@font-face {
 font-family: 'Courante';
 src: url('/planer_reg-webfont.eot');
 src: url('/planer_reg-webfont.eot?#iefix') format('embedded-opentype'),
 url('/planer_reg-webfont.woff') format('woff'),
 url('/planer_reg-webfont.ttf') format('truetype'),
 url('/planer_reg-webfont.svg#Courante') format('svg');
 font-weight: normal;
 font-style: normal;

}