CODEWITHSUNDEEP
internet-explorerfont-awesome
user5542200
user5542200

Reputation:

IE and Font Awesome

I'm using Font Awesome icons on my website which display fine in Chrome, Firefox, Edge etc but don't show in any version of IE, not even the square boxes. I obviously thought I had an issue with my site until I went over to the Font Awesome website using IE and noticed no icons displaying there either. The F12 console displayed this error message CSS3111: @font-face encountered unknown error.

Chrome, Firefox screenshot

IE screenshot

I'm deducing from this that there has to be a local setting in IE which I need to adjust, screenshot was taking with compatibility view off. Any views appreciated.

Upvotes: 1

Views: 2917

Answers (2)

TadLewis
TadLewis

Reputation: 151

Disablement of downloadable fonts has probably been implemented. DISA STIG DTBI030-IE11.

Try this solution that uses base 64 and CSS to force the fonts through.

This is fixable. You just need to Base64 the font and include it in a CSS file. Make sure to remove your call to the downloadable WOFF file once you include the call to the new FontAwesomeB64.css

Use https://www.base64encode.org/ to encode the WOFF Font-Awesome font file.

Edit the the resulting file and add these lines. When you get to the src:url line, make sure to run that right into the base64 information you received (don't use the greater than and less than signs I show here.) At the end of that base64 information add the single quote, parentheses, a semi-colon, and curly brace to finish:

@font-face { 
font-weight: 400;
font-style: normal;
font-family: 'FontAwesome';
src:url(data:application/x-font-woff;base64,<insert base64 code here>);}

You now have a base64 CSS file of the Font-Awesome font that bypasses all font download denial settings in browsers.

I've found that this works with all fonts, a little heavier on the download but worth the guarantee of functionality.

Upvotes: 3

Fraser Crosbie
Fraser Crosbie

Reputation: 1762

This issue is likely related to IE 11: error CSS3111 in my own code, and google.com/fonts doesn't render any fonts

Upvotes: 0

Related Questions