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?

score 27 · Accepted Answer · answered Dec 30 '12 at 16:39

27

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/

answered Dec 30 '12 at 16:39

Victor S

5,098
5
44
62

5

Based on my experience, the experience of the OP, and the experience of Victor S at http://stackoverflow.com/questions/11559592/ie9-css3111-font-face-encountered-unknown-error#comment19491377_11559725, it seems like Lato is the culprit. What do you do, then? Pick a different font? – carpeliam May 15 '14 at 22:25
Just an idea - maybe check whether the license of the font allows modifying it, and then fix it? – Stan Feb 17 '16 at 09:05
1

I found this web site that convert fonts compatible with IE, it works for me: https://onlinefontconverter.com/ – Mehdi Yeganeh Jun 25 '16 at 12:36
8

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 `.otf`s or `.woff`s instead. – ericsoco Oct 26 '16 at 03:41
Fixed it with font-squirrel generator. [link](https://www.fontsquirrel.com/tools/webfont-generator) – Mr_Green Apr 17 '18 at 14:50
1

@ericsoco solution worked for me. Removed the .eot and then no more error in IE11. This was using Open-Iconic fonts. – Yogi Oct 15 '18 at 19:08
The link provided in the answer, does not exist.(not working) – Confidenc3 Dec 07 '20 at 12:56

score 5 · Answer 2 · answered Oct 09 '16 at 08:11

5

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

answered Oct 09 '16 at 08:11

KAD

10,972
4
31
73

score 3 · Answer 3 · edited May 23 '17 at 12:18

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

edited May 23 '17 at 12:18

Community

1
1

answered Jan 27 '17 at 13:22

malamirada

121
7

score 1 · Answer 4 · answered Jul 17 '17 at 17:33

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

score 0 · Answer 5 · answered Sep 29 '17 at 16:12

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.

score 0 · Answer 6 · answered Mar 24 '20 at 15:38

0

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.

answered Mar 24 '20 at 15:38

mtareq

171
2
4

score -1 · Answer 7 · answered Jul 19 '12 at 11:19

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

This is not about header access control origin, but CSS3111 error. — Tien Do, Oct 25 '12 at 15:27
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. — Victor S, Dec 30 '12 at 16:28

IE9 - CSS3111: @font-face encountered unknown error

7 Answers7

Linked