FontAwesome does not load on Windows 8.1 on IE11

问题:

My website www.jungledragon.com makes heavy use of the icon font "FontAwesome". This week I upgraded my system to Windows 8.1, which comes with IE11 installed. I noticed that the FontAwesome font fails to load completely, and the browser console shows these errors:

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
File: fontawesome-webfont.eot
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
File: fontawesome-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. File: fontawesome-webfont.ttf

I know what these errors mean, they are related to cross origin permissions, due to the actual font files being hosted on Amazon S3 in my case.

However, here is the weird thing: I do have a CORS policy applied to the bucket in question, and this has always worked. To do some more research, I tried putting IE11 into different document modes, being IE10, IE9, and IE8. The font fails to load in all cases. This is strange, since when I was on Windows 8, it would work on IE8, 9 and 10 just fine.

It looks like those document modes are really useless though, since I then continued to do some real testing using browserstack, making use of real native browser versions instead of document modes. On both Windows 7 and 8, the font loads fine in IE8, 9, 10, and also in the IE11 preview.

I'm now a bit lost on where the problem is. Is the problem a result of Windows 8.1 specifically (it seems for me, but I can't test that in browserstack, it's not available)? Or is it perhaps a problem only in the final version of IE11? And if so, why is it a problem in every document mode?

Note: should you be wanting to help in testing, on the website it is very easy to see whether the font loads or not: the global navigation bar will have no icons, as well as several other areas of the site.

回答1:

We're seeing the same sort of error using Avenir fonts via fast.fonts.com. They work perfectly fine in IE10, 9, 8...but not IE11. Our issue is exhibited on Windows 7 using IE11.

What's curious is at fast.fonts.com, you get the option to us either a JS file or a CSS file call. The JS call fails, but the CSS does not. Unfortunately, the CSS call doesn't work on Firefox.

Example error: CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. File: 6662a841-5b52-4af6-a868-6b43e3d7b263.ttf

回答2:

I can't comment yet, so I have to post this as an answer..

This is an official issue (242) acknowledged by Google: https://code.google.com/p/googlefontdirectory/issues/detail?id=242

You might want to track it ;-)

If I understood it correctly, none of the webfonts work in IE11 on Win 8.1. That would be really bad for a lot of us web devs :-(

回答3:

Odd. Today I received an announcement from BrowserStack that they now support IE11 on Windows 8.1, so I jumped on this opportunity to do a clean test. The font loading issue did not occur, it loaded just fine.

I then did another test on my local Windows 8.1 using IE11 and it is now solved there as well. I did absolutely nothing to change it, it seems to have solved itself. The only thing I can think of is that an automated update was pushed to Windows 8.1/IE11? Either way it is solved now.