IE9 - CSS3111: @font-face encountered unknown error

Question

I embed three Google Fonts from http://www.google.com/webfonts (Dosis, Open Sans, Lato)

And they all work fine except IE9 where it returns:

CSS3111: @font-face encountered unknown error. 
2HG_tEPiQ4Z6795cGfdivPY6323mHUZFJMgTvxaG2iE.eot

CSS3111: @font-face encountered unknown error. 
KlmP_Vc2zOZBldw8AfXD5g.eot

CSS3111: @font-face encountered unknown error. 
zLhfkPOm_5ykmdm-wXaiuw.eot

And breaks entire website occasionally.

What can be done to resolve this?

Solution 1

I found this answer, which addresses the question more directly than the accepted answer, which really, shouldn't have been the answer :)

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

I solved the problem on IE 9 using the below @font-face:

@font-face {
    font-family: Gidole;
    src: url('Gidole-Regular.woff2') format('woff2'),
         url('Gidole-Regular.woff') format('woff');
}

Solution 3

We've found that you get the same error due to a new Windows 10 policy. If your error occurs on Windows 10 + IE11, the solution can be this:

IE 11: error CSS3111 in my own code, and google.com/fonts doesn't render any fonts

Solution 4

Commenting out the 2nd source declaration for the EOT font worked for me. Make sure you the 1st declaration right above "src: url("../fonts/webfonts/Helvetica Neue.eot");"

Tested on Chrome, Firefox,Sarafi, IE9-10-11.

@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/webfonts/Helvetica Neue.eot");
  src: local("Helvetica Neue"), local("Helvetica Neue"),
    /*url("../fonts/webfonts/Helvetica Neue.eot?#iefix") format("embedded-opentype"),*/
    url("../fonts/webfonts/Helvetica Neue.woff2") format("woff2"),
    url("../fonts/webfonts/Helvetica Neue.woff") format("woff"),
    url("../fonts/webfonts/Helvetica Neue.ttf") format("truetype"),
    url("../fonts/webfonts/Helvetica Neue.svg") format("svg"); }

View more solutions