CODEWITHSUNDEEP
csstwitter-bootstrapinternet-explorertwitter-bootstrap-3internet-explorer-11
ruhong
ruhong

Reputation: 1903

Bootstrap glyphicon shows up but IE11 throws CSS3111 error

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

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?

Upvotes: 3

Views: 3404

Answers (2)

Fraser Crosbie
Fraser Crosbie

Reputation: 1762

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

Upvotes: 1

Mahabub Islam Prio
Mahabub Islam Prio

Reputation: 1085

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.

Upvotes: 0

Related Questions