Bootstrap glyphicon appears, but IE11 throws CSS3111 error
The bootstrap glyphicon renders well, but the IE11 console reports CSS3111: @font-face encountered unknown error
for these files:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.woff
- glyphicons-halflings-regular.ttf
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, the icon won't show .
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.eot') !important;
...}
Using Bootstrap 3.3.4, IE11
How to get rid of errors?
source to share
This could be due to a Group Policy setting called Untrusted Font Blocking. Read more about this here: IE 11: CSS3111 error in my own code and google.com/fonts does not render fonts
source to share
This might help you I think ...
IE9 - CSS3111: @ font-face encountered an unknown error
and they,
Try http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/ if it can help with the secret error.
The http://fontface.codeandmore.com solution is now integrated into FontForge, so you can simply use http://fontface.codeandmore.com to convert your font.
source to share