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.

Answer 1

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