IE9 - CSS3111: @font-face encountered unknown error

I embed three Google Fonts from (Dosis, Open Sans, Lato)

And they all work fine except IE9 where it returns:

CSS3111: @font-face encountered unknown error. 

CSS3111: @font-face encountered unknown error. 

CSS3111: @font-face encountered unknown error. 

And breaks entire website occasionally.

What can be done to resolve this?


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.


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

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 doesn't render any fonts

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

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"

See the reference

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.

Need Your Help

How to serve static page in phoenix framework?

elixir phoenix-framework

I want to serve static page in Phoenix Framework to use it in Angular Views. I know I can serve regular HTML, but I want to get rid of the default LayoutView. I could do with a solution to just hav...

Scala - how to print case classes like (pretty printed) tree

scala pretty-print case-class

I'm making a parser with Scala Combinators. It is awesome. What I end up with is a long list of entagled case classes, like: ClassDecl(Complex,List(VarDecl(Real,float), VarDecl(Imag,float))), just ...