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

Question

Some of our IE11 clients do not see font-awesome webfonts in our web application. I have done extensive testing using native instances of IE11, as well as using cross browser validation tools. Everything is done correctly. So I'm struggling to figure out why some IE11 installations might not see Font-Awesome websites? I tried to change the security settings to replicate the problem, but without success.

So, I'm looking for tips on what might cause this problem? The only other thing I can think of is that IE is served through 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 where the icons are displayed. When the user re-enters the page from the hyperlink, the icons are not displayed. However, ctrl-F5 sorts it.

More evidence 3

I also see Ajax related requests related to clicked fonts becoming inactive.

More evidence 4

When I add my site to "Limited", I can’t even log in, so I don’t believe that this is the reason.

The cause of my problem.

My problem was caused and fixed using IE browser event history 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 problems, but was not the cause in my case

The cause of my problem, but NOT for HTTPS

Just found that if I try to implement HTTPS through Cloudflare, the problem will present itself ....

Answer 1

IE Security Settings

I noticed sites in "Restricted Sites" (in Internet Explorer) not showing the awesome font , while sites in the "trusted sites" zone do.

Therefore, I assume that the problem is related to different IE security settings for different users.

Can you ask users to check / change their parameters in IE, for example. (instructions for IE 11, but others will be very similar):

• Cog settings (icon in the upper right corner)
• Internet Options (Menu Option)
• Security (tab)
• Sites (button)
• Enter the website address for your website.
• Click "Add" (button)

NB if you are not using https, you might also need the option

• "Server verification is required (https :) for all sites in this zone" - deselect

A user request makes these changes and then fixes the problem.

Fiddler for debugging

If you have access to any of the user machines, you can leave, or you have any advanced users that you can follow, then you can also try to debug using the excellent Fiddler http proxy on your machine to see what is happening on HTTP request / response level.

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

Answer 2

• Cog
• Internet Options
• Security
• User level
• Download → Download Font → Enable.

Answer 3

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

We use Spring MVC and Tomcat. Adding the following code to the CORS filter filter 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); } 

fooobar.com/questions/239467 / ...

Answer 4

If you cannot enable downloadable fonts for security reasons, DISA STIG try this solution, which will show you how to use the Base 64 font and use it as a CSS file to press the font through.

Answer 5

Removing the Pragma header from the response header at the endpoint from where the fonts are downloaded.

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