8

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
josh3736
  • 139,160
  • 33
  • 216
  • 263
  • @Knu: Still chokes without the comment. – josh3736 Aug 15 '11 at 20:40
  • 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? – Bojangles Aug 15 '11 at 21:23
  • @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.) – josh3736 Aug 15 '11 at 21:31
  • Just to be clear, IE9 also requires an Access-Control-Allow-Origin header for cross-domain fonts. It's actually a *good* idea. – EricLaw Jan 08 '12 at 15:24
  • @EricLaw-MSFT-: Why is it a good idea? Also, IE9 seems to have no problem loading an EOT file cross-domain without CORS headers. – josh3736 Jan 10 '12 at 17:56

2 Answers2

6

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');
}
Andrew Le Conte
  • 61
  • 1
  • 2
4

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).

Knu
  • 14,806
  • 5
  • 56
  • 89
  • 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. – josh3736 Aug 24 '11 at 18:46