IE9 - CSS3111: @font-face encountered unknown error

Viewed 60742

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?

7 Answers

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

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.

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.

Related