Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 625
josh3736 Avatar asked Aug 15 '11 20:08

josh3736


People also ask

How to use@ font face in CSS?

Definition and Usage With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore. In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

How to use font face in html?

The HTML <font> face Attribute is used to specify the font family of the text inside <font> element. Attribute Values: It contains single value font_family which is used to specify the font family. Several font family can be used by separating comma. Note: The <font> face attribute is not supported by HTML5.

What is the font face rule?

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.


2 Answers

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');
}
like image 94
Andrew Le Conte Avatar answered Oct 05 '22 19:10

Andrew Le Conte


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

like image 32
Knu Avatar answered Oct 05 '22 19:10

Knu