Photo by ada (she’s 18 mo’s old)

Data-uris and @font-face

How to have it all.


I’ve been having difficulties lately with Firefox’s Cross-Origin policy balking at loading fonts served off our CDN. Sadly, the documentation on configuring this feature is almost non-existent. Everyone’s solution is “Allow-Cross-Origin: *”, which is basically the Internet punting and just routing around the problem. I chose to punt a different way.

My solution has been to inline fonts as data-uris, using the new bulletproof @font-face syntax from FontSpring. This avoids FOUT and has worked great for our custom font icon, but was failing in IE 7/8 when I tried to apply it to a body font using multiple font files for different weights and styles. The solution I found is to simply set the font-weight and font-style in both @font-face declarations. Simple.

To summarize:

Example:

/*— regular font —*/
@font-face {
font-family: ‘MyFontFamily’; src: url(‘myfont-webfont.eot?’) format(‘embedded-opentype’);
font-weight:normal;
font-style:normal;
}
@font-face {
font-family: ‘MyFontFamily’;
src: url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE) format(‘woff’),
url(‘myfont-webfont.svg#svgFontName’) format(‘svg’);
font-weight:normal;
font-style:normal;
}
/*— bold font —*/
@font-face {
font-family: ‘MyFontFamily’;
src: url(‘myfont-webfont-bold.eot?’) format(‘embedded-opentype’);
font-weight:bold;
font-style:normal;
}
@font-face {
font-family: ‘MyFontFamily’;
src: url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE) format(‘woff’),
url(‘myfont-webfont-bold.svg#svgFontName’) format(‘svg’);
font-weight:bold;
font-style:normal;
}