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.
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.
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.
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.
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');
}
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With