IE 11 “sometimes” preventing the display of “font-

问题:

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....

回答1:

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

回答2:

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

回答3:

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

回答4:

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.

回答5:

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);
}