IE9 @font-face encountered unknown error

Question

I'm having an issue with @font-face on IE9 (windows 7). IE 8 on XP and all browsers on mac give me no probs. Just IE9.

I'm embedding my font like so:

@font-face {
    font-family: 'wendy_lpregular';
    src: url('../fonts/wendylpstd-medium.eot');
    src: url('../fonts/wendylpstd-medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/wendylpstd-medium.woff') format('woff'),
         url('../fonts/wendylpstd-medium.ttf') format('truetype'),
         url('../fonts/wendylpstd-medium.svg#wendy_lpregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

It doesn't render the font and gives me the following error in the console:

CSS3111: @font-face encountered unknown error. 
wendylpstd-medium.eot

I have another font which I am embedding - and it is displaying correctly. What could be causing the ever fantastic IE9 to be crying over this?

Solution 1

And now to our main highlight - the "CSS3111: @font-face encountered unknown error". This error is very ambiguous. If you have a look at MSDN again, you'll see its description says: "An unknown problem was encountered with the "Web Open Font Format (WOFF)", and "Embedded OpenType font (EOT)" of the Cascading Style Sheets (CSS) font". "Unknown Problem" doesn't sound too good to me - how am I supposed to solve an unknown problem? Fortunately we're given a hint here. It says: "Check source of the fonts". Indeed, CSS3111 is usually caused by an issue with the font's binary source. One of the popular online TTF to EOT converters for example produces EOT files with a NAME table that doesn't comply to the Microsoft standards, which results in EOT fonts that never load in IE and produce the CSS3111 error. So, when you experience a CSS3111, it is always good to try using a different TTF to EOT converter or font face generator.

Source: http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/

Solution 2

You have to convert your font to base64.

1. Use this fiddle to convert your woff font file to base 64.

2. Use the output from step 1 in your CSS file like this:

   src: url(data:application/x-font-woff;charset=utf-8;base64, [base 64 value from step 1 without brackets] ) format('woff');
   

The final result will look something like this, where your base64 is the value from step 1:

Good luck!