IE 11 "sometimes" preventing the display of "font-awesome" webfonts

Question

Some of our IE11 clients are not seeing the "font-awesome" webfonts in our web application. I have done extensive testing with our own IE11 instances, and also via cross browser testing tools. All performed correctly. So I am struggling to understand why some setups of IE11 might not see "Font-Awesome" webfonts? I did try altering the security settings to replicate the issue, but with no success.

So I am seeking some advice on what might cause this issue? Only other thing I can think of is if IE is being served across a shared server such as Citrix.

Thanks in advance.

EDIT1

More evidence:

Desktop1   S/W Firewall(on/off)     Windows 7     IE V11.0.9600.17959    Office  Errors
Laptop1    No S/W Firewall          Windows 7     IE V11.0.9600.17959    Office  OK
Laptop1    No S/W Firewall          Windows 7     IE V11.0.9600.17959    Home    OK 
Azure VM   ?? S/W Firewall          Windows 10    IE V11 via Edge        Azure   OK
Azure VM   ?? S/W Firewall          Windows 10    Edge                   Azure   OK
Laptop2    ?? S/W Firewall          Windows 10    Edge                   Home    Errors

More Evidence 2

When I first enter the page the icons show. When the user re-enters the page from say a hyperlink the icons do not show. However a ctrl-F5 sorts it.

More Evidence 3

I am also seeing Ajax linked requests linked to clickable fonts being made inactive.

More Evidence 4

When I add my site to "Restricted", I cannot then even log in, so I do not believe this is the reason.

Cause of my problem found.

My issue was caused and fixed by an IE Browser History setting via

Cog
  - Internet Options
     - General
       - Browsing History
          - Settings
            - Temporary Internet Files
              - Automatic (will cause issue)
              - Every time I visit the webpage (will fix issue)

The answer below will still cause issues, but was not the cause in my case

Cause of my problem found, but NOT for HTTPS

Just found that if I try to implement HTTPS via Cloudflare, the issue represents itself....

It may be the proxy. If you put just the link to the FontAwesome website instead of the files in you application, the proxy may be blocking external access. — Sertage, Jul 31 '15 at 11:59
@SamJolly Try adding the site to the "Trusted" zone not "restricted". — MemeDeveloper, Aug 20 '15 at 14:27
@SamJolly Also - have you tried fiddler on the setup(s) that do not work? — MemeDeveloper, Aug 20 '15 at 14:27

score 5 · Accepted Answer · edited Aug 20 '15 at 02:09

5

IE Security Settings

I have noticed sites in the "Restricted Sites" (in Internet Explorer) do not show font awesome whereas sites in "trusted sites" zone do.

So I'd guess the issue is with different IE security settings for different users.

Can you ask users to check / change their options in IE e.g. (instruction for IE 11 but others will be very similar) :

Settings Cog (icon in top right)
Internet Options (menu option)
Security (tab)
Sites (button)
Enter the website address for your site
Click Add (button)

N.B. if you are not using https you may also need the option

"Require server verification (https:) for all sites in this zone" - to be deselected

Request a User makes these changes and then troubleshoot from there.

Fiddler to debug

If you have access to any of the user's machines, can remote in, or have any advanced users you can guide then could also attempt to debug using the excellent Fiddler http proxy on their machine to see what is happening at the http request / response level.

You can also change your own IE security settings to see if you can replicate the problem

edited Aug 20 '15 at 02:09

MemeDeveloper

6,457
2
42
58

answered Aug 19 '15 at 21:10

Charles Fettinger

66
1

What is an untrusted site? OK we do not use SSL at present, would this help? What we have also found is that different access points work ie home while the office does not. The office has nothing special like a proxy, just an ISP supplied router with standard setup. The only thing that is changing is the router however. We have had issues with Edge as well, but not Chrome or Firefox. Edge and IE over an Azure Windows 10 VM via RDC worked perfectly. – SamJolly Aug 20 '15 at 01:38
1

If you establish that the issue is indeed with IE security settings then yes SSL is likely to help. It's a good idea for production sites anyhow, all depends on the budget really - a certificate will cost around 100 - 200 USD and in modern IIS takes a few minutes to setup. Bottom line SSL would not hurt – MemeDeveloper Aug 20 '15 at 02:12
1

If you have no problems on a home network / machine, but do have issues in an office /domain network then IE security settings are a very likely candidate. N.B. If you are hosting in azure VM and did not change these IE security settings from the defaults then they should be set on very high security / restrictive settings (assume you mean Windows Server - not windows 10?) and so will give you another place to test and see if you can replicate the problems. – MemeDeveloper Aug 20 '15 at 02:16
@MemeDeveloper, Thanks for this. The Azure VM was windows 10, and I agree I would expect the security to be tight on this by default. However I experienced no issues. – SamJolly Aug 20 '15 at 08:47
Charles et al, more evidence, see EDIT1 in question – SamJolly Aug 20 '15 at 08:49
1

@SamJolly Its a Windows Server that would have very tight IE security settings by default, not Windows 10. Thanks. – MemeDeveloper Aug 20 '15 at 14:28
I found the cause to our issue which was to do with browser history settings and using the "Automatic" setting. Feels like an IE bug. See EDIT to my question. – SamJolly Aug 21 '15 at 08:54

score 2 · Answer 2 · answered Jun 05 '17 at 21:53

In my case, I could see this issue only when using Win 10 + IE 11. Even after ensuring correct IE settings (security zone and font download enabled), the font won't render. It seems that cache headers should not be set for fonts.

We are using Spring MVC and Tomcat. Adding following code in CORS filter solved problem for me.

        if (!request.getServletPath().endsWith(".woff")
                && !request.getServletPath().endsWith(".ttf")) {
            response.setHeader("Cache-Control", "no-cache");
            response.setHeader("Pragma", "no-cache");
            response.setDateHeader("Expires", -1);
        }

https://stackoverflow.com/a/33508291/828062

This fixed it for me, thx! Couldn't change IE Settings because not possible on our company notebooks. As an adjustment i didn't override the headers, but "not-set" them with a custom Filter and ResponseWrapper. See here for details: https://stackoverflow.com/questions/7895196/how-do-delete-a-http-response-header/7895292#7895292 — Recek, Jun 22 '17 at 11:22

score 1 · Answer 3 · answered Mar 03 '16 at 22:11

1

Cog
Internet options
Security
Custom Level
Downloads -> Font download -> Enable.

answered Mar 03 '16 at 22:11

dwjohnston

11,163
32
99
194

Perfect! Thank you! :) – Rami A. Nov 16 '17 at 07:34

score 1 · Answer 4 · answered Jun 13 '17 at 18:43

1

If you can't enable downloadable fonts for DISA STIG security reasons try this solution that shows you how to Base 64 a font and use it as a CSS file to push the font through.

answered Jun 13 '17 at 18:43

TadLewis

141
9

2

Checked that solution, doesn't work. What I posted there: 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:51

score 0 · Answer 5 · answered Jan 31 '18 at 19:52

Removing the Pragma Header from the response header in the endpoint from where the fonts are downloaded solved for me.

if (request.getServletPath().contains(".woff") || request.getServletPath().contains(".ttf")) {
    headers.remove(HttpHeaders.PRAGMA);
}

IE 11 "sometimes" preventing the display of "font-awesome" webfonts

5 Answers5

IE Security Settings

Fiddler to debug

Linked