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?

Discordant

Answer 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/

Peppy

Based on my experience, the experience of the OP, and the experience of Victor S at #11560092, it seems like Lato is the culprit. What do you do, then? Pick a different font? – Upcoming

Just an idea - maybe check whether the license of the font allows modifying it, and then fix it? – Dariadarian

I found this web site that convert fonts compatible with IE, it works for me: onlinefontconverter.com – Molini

Here's another idea (in 2016) -- if you're not trying to support crusty-ass IE versions, just nuke the .eot files. Any version of IE not created before the last bubble burst will just load your .otfs or .woffs instead. – Readability

Fixed it with font-squirrel generator. link – Erysipelas

@Readability solution worked for me. Removed the .eot and then no more error in IE11. This was using Open-Iconic fonts. – Unmixed

The link provided in the answer, does not exist.(not working) – Kyliekylila

Answer 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');
}

Yatzeck

Answer 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

Ironworks

Answer 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"); }

Doctorate

Answer 5

This error can also occur when you use desubroutinized fonts, which no version of Internet Explorer seems to be able to handle.

If you are generating your font files using pyftsubset from the fonttools package, make sure that you do not set the --desubroutinize flag.

Lovett

Answer 6

I had the same issue in IE11, I fixed the issue by converting my font file from .woff2 to .woff.

In general, make sure the browser supports the font file format.

Evetta

Answer 7

hopefully the following note will be useful for you:

If your fonts are located on a remote server (a CDN for example) they won't render properly in all browsers. That's only partially true. Yes, without an explicit "Access-Control-Allow-Origin" header, Firefox and Internet Explorer won't display your webfonts (if you hit F12 to open up Developer Tools in IE and go to the Console tab, you will get the CSS3117: @font-face failed cross-origin request. Resource access is restricted. error) That's simply because IE and Firefox don't allow cross-domain fonts by default. On the other hand Google Chrome will load the fonts without a problem and if you're not aware of the cross-origin issue, debugging this may get really frustrating. While I personally prefer to place my fonts on the same domain too, you can still place them on a remote location and have them load successfuly in all browsers, as long as you add this declaration to your main .htaccess file:

<FilesMatch "\.(ttf|otf|eot|woff)$">
      <IfModule mod_headers.c>
          Header set Access-Control-Allow-Origin http://mydomain.com"
      </IfModule>
</FilesMatch>

See the reference

Anvers

This is not about header access control origin, but CSS3111 error. – Squinty

What happens when FF shows the font but IE doesn't? particularly CSS3111: @font-face encountered unknown error. KlmP_Vc2zOZBldw8AfXD5g.eot is the error that I get, which I've narrowed down to being the Lato font. – Peppy