Bootstrap glyphicon shows up but IE11 throws CSS3111 error

Question

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?

This can help to you I guess ... stackoverflow.com/questions/11559592/… — Mahabub Islam Prio

Fraser Crosbie Fraser Crosbie · Accepted Answer · 2015-12-05T03:12:03

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

Bootstrap glyphicon shows up but IE11 throws CSS3111 error

2 Answers