3

I have created font icons through icomoon. And used the below code to add the fonts in the CSS of a web page:

@font-face {
  font-family: 'xlfont';
  src: url('./images/spreadsheet/xlicons.eot?-dzszjm');
  src: url('./images/spreadsheet/xlicons.eot?#iefix-dzszjm') format('embedded-opentype'), 
  url('./images/spreadsheet/xlicons.woff?-dzszjm') format('woff'), 
  url('./images/spreadsheet/xlicons.woff') format('woff'), 
  url('./images/spreadsheet/xlicons.ttf?-dzszjm') format('truetype'), 
  url('./images/spreadsheet/xlicons.svg?-dzszjm#ssicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

This is working fine in IE11 until I enabled the option “untrusted font blocking”. Once I enabled this option, I got the following error.

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

Anyone else had an issue like this? Could you please give any suggestion are workaround for this?

user3705893
  • 79
  • 1
  • 6

1 Answers1

0

Try commenting out the embedded-opentype declaration line. If that doesn't work, consider the following from another answer on stack:

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.

OG question: IE9 - CSS3111: @font-face encountered unknown error

Reference: http://marinbezhanov.com/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/

Claire
  • 3,146
  • 6
  • 22
  • 37