Data URI in embedded font declaration (@font-face) breaks IE < 9

Question

I have a CSS file with a @font-face declaration that embeds the font file via a data URI:

@font-face {
    font-family: 'Custom-Font';
    src: url('eot/font.eot');
    src: url('eot/font.eot?#iefix') format('embedded-opentype'),
        /* ugly FF same-Origin workaround... */
        url("data:application/octet-stream;base64,d09GRgABAAAAA ... ") format('woff'),
        url('ttf/font.ttf') format('truetype'),
        url('svg/font.svg#Custom-Font') format('svg');
    }

Embedding the font with the data URI causes IE < 9 to not load the font. If I remove the line (or change it back to reference the .woff file), IE will load the font.

What about this CSS confuses IE?

Background: I have a page which loads embedded fonts from a different domain (a CDN). Unfortunately, Mozilla requires a CORS header (Access-Control-Allow-Origin) on embedded fonts served from different domains (an abuse of CORS and terrible idea in my opinion). For reasons beyond my control (bureaucracy), I'm unable to get the CORS header sent out on font files, so I'm stuck with the sub-optimal situation of embedding the font file in the CSS file via a data URI.

Sldney

@Knu: Still chokes without the comment. – Sldney

I definitely understand the benefits of loading fonts from a CDN, but could you not just host the .woff file locally, and everything else on the CDN? – Gnni

@JamWaffles: Nope. The HTML is served from (and thus the Origin is) an application server I don't have access to. (Think a CMS-like system. I can edit the HTML, but I can't put files on the server.) – Sldney

Just to be clear, IE9 also requires an Access-Control-Allow-Origin header for cross-domain fonts. It's actually a good idea. – Cavorelievo

@EricLaw-MSFT-: Why is it a good idea? Also, IE9 seems to have no problem loading an EOT file cross-domain without CORS headers. – Sldney

Answer 1

The maximum URL length has probably been exceeded.
Remember that older versions of IE adds everything between the ? and the last '); (including the data URI).
So in your case the solution would be to use another method (Mo' Bulletproofer for example).

Noguchi

This appears to be the case. I hoped IE would simply ignore that declaration (and fall back to the src: declared on line 3), but it looks like it throws the entire definition out. I've had to fall back to using conditional comments to load a stylesheet without the data URI in IE. – Sldney

Answer 2

I had the same problem. Moving the embedded font into a different declaration worked for me.

@font-face {
    /* Non-FF */
    font-family: 'Custom-Font';
    src: url('eot/font.eot');
    src: url('eot/font.eot?#iefix') format('embedded-opentype'),
        url('svg/font.svg#Custom-Font') format('svg');
}
@font-face {
    /* FF same-Origin workaround... */
    font-family: 'Custom-Font';
    src: url(data:font/truetype;charset=utf-8;base64,d09GRgABAAAAA...) format('truetype');
}

Adellaadelle