3

Bootstrap glyphicon shows up fine but IE11 console reports CSS3111: @font-face encountered unknown error for these files:

  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.woff
  • glyphicons-halflings-regular.ttf

enter image description here

This is the Bootstrap override in my stylesheet (only the URL paths were changed):

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.eot');
    src: url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
        url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
        url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), 
        url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
        url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Side note: If I add !important after the first src url, then the icon doesn't show up.

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.eot') !important;
...}

Using Bootstrap 3.3.4, IE11

How do I get rid of the errors?

ruhong
  • 1,793
  • 5
  • 28
  • 34

2 Answers2

1

This may be related to a group policy setting called Untrusted Font Blocking. Read more about it here: IE 11: error CSS3111 in my own code, and google.com/fonts doesn't render any fonts

Community
  • 1
  • 1
Fraser Crosbie
  • 1,672
  • 1
  • 12
  • 21
0

This can help to you I guess ...

IE9 - CSS3111: @font-face encountered unknown error

and these,

Try this http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/ if it may help for the mystery error.

The solution on http://fontface.codeandmore.com now integrated FontForge, so you can just use http://fontface.codeandmore.com to convert your font.

Community
  • 1
  • 1
Mahabub Islam Prio
  • 1,075
  • 11
  • 25
  • I would prefer NOT to modify 3rd party files (which is Bootstrap's .eot file, according to your answer). I don't want to add an unnecessary step to my build process. If someone can verify that this is indeed a Bootstrap issue, then I will file it on their GitHub repo. – ruhong May 16 '15 at 01:26
  • please ... you are always welcome ... make a issue there ... and if you get a proper solution then please post the solution here... it really would be so great for us... – Mahabub Islam Prio May 16 '15 at 17:06