4

I used Font-awesome-min.css were working fine in IE 11 and chrome.

But my Client requirement is to use font-awesome even we disabled the font download from IE Internet option (Internet options -> Security -> Custome level -> Download -> Font download -> Disable).

any suggestion?

Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
Dhana
  • 1,618
  • 4
  • 23
  • 39

3 Answers3

3

Base 64 encoding does not work, entirely. It works fine on Chrome, but in IE 11 with Font Downloads disabled, it does not work.

This makes sense and does not surprise me. From a security perspective, if you don't allow 3rd party fonts to render on your system, then why would an embedded font in CSS be treated any different? It is still a 3rd party font being downloaded from an untrusted source.

Many solutions:

  • Don't use FA.
  • Use FA as images.
  • Convince the Domain admin to Enable Font Downloads.
  • Install the font locally (via Group Policy) and use url: local(myFont.woff).
  • If the site is internal, add it to the Trusted Sites zone and ensure Font Downloads are Enabled.
Derek White
  • 320
  • 2
  • 13
  • I agree with your assessment but I have found that even though font downloads are disabled in Chrome and Firefox, this may still work. – TadLewis Apr 19 '18 at 21:35
  • 3
    I'm having this issue. My client is literally the US Government, so I'm not gonna be able to get them to change their security policies. – josh1978 Aug 01 '18 at 20:46
  • Current FA best practice is to use SVG & JS, not Web Fonts & CSS. This will solve your problem. https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=svg-with-js – Derek White Sep 07 '18 at 19:28
  • Install the font locally (via Group Policy) and use url: local(myFont.woff) is there any document available? – lazyHead Jun 03 '20 at 12:19
2

The hard way is to switch to png-based https://github.com/encharm/Font-Awesome-SVG-PNG or you can change the specific icons you want to use into png file and change content of that icon in .css file

Vũ Ngô
  • 601
  • 6
  • 7
2

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.

TadLewis
  • 141
  • 9
  • 2
    This doesn't work for the same reason non-base64 web fonts don't work. You're still passing in the mime type in the src:url value, in the base64 example, and that's how the security setting in IE is blocking webfonts. – josh1978 Aug 01 '18 at 20:50