fontawesome-webfont.ttf not working on IE9

[robertj98]

Font-Awesome is displaying fonts as squares on IE9 running on Win7. IE9 is NOt running in compatibility mode.
The error I am getting is:

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
fontawesome-webfont.ttf

The font awesome website displays OK in IE9 - but it seems to be using the .woff files.

I downloaded a file (embed.exe) which says it can change the embeddable flag in the .ttf font but I cannot run this on my 64-bit Win7.

Can you conform that this is an issue, or do you have a version of the .ttf file that can be used in IE9 - with th eembeddable flag on.

Robert Jones

[zanedev]

I'm seeing the same squares in IE9 but not IE8... Very strange. I don't know what the root cause is though, not seeing that CSS error anywhere using IE developer tools etc. How did you get that error to display? Did you figure out a fix yet?

Oh and the font awesome site displays fine in IE9 also.

[duncansmart]

If you're serving static content from a CDN, IE9 may be failing to load the web fonts due to cross-origin issues.

If you run the F12 developer tools in IE9 you'll see:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
fontawesome-webfont.eot?#iefix

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
fontawesome-webfont.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
fontawesome-webfont.ttf

See http://stackoverflow.com/questions/5065362/ie9-blocks-download-of-cross-origin-web-font - you need to add the Access-Control-Allow-Origin: * HTTP header to the font files served from the CDN.

[robertj98]

duncansmart - I saw that post on StackOverflow - but doesn't this mean that Font-Awesome has to modify the fonts at their end to allow this?

I downloaded the tool to change this property locally, but it would not run on 64-bit Win7.

[duncansmart]

@robertj98 All I know is that I'm not seeing any issues now with IE9, so I doubt the files themselves are the issue.

Another thing to look at is the MIME type (Content-Type HTTP header) with which you serve the files. I've set eot, ttf and woff to be served as application/octet-stream - the same used by the font-awesome web site.

[zanedev]

Even weirder, now I am seeing the fonts render sporadically on both IE9 and IE8, sometimes it works sometimes it doesn't. Must be a different issue then..

[robertj98]

The fonts are being served from my local IIS on Win7Pro. Checked the MIME type and it is application/octet-stream.
But as we may deploy the site on may webservers (hosted aswell), then changing the MIME type may not be available. I'll do some more testing tomorrow. BTW I get the same result serving the page from IIS on WinServer2008 virtual server using IE9.

[zanedev]

Any luck? Still can't get them to display in IE. When I use fiddler, it is requesting both the ttf and the woff, but not the eof. If I compare to font awesome's website it is only requesting the eof files, same browser. Very strange

[duncansmart]

Working OK for me now. Could be IE going into compatibility mode? I'm sending X-UA-Compatible: IE=Edge HTTP header for pages.

[thorst]

I had to change font-awesome.css

From:

src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');

To:

src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');

[zanedev]

thanks thorst ill give that a try. definitely not compatibility mode, already checked that..

[robertj98]

thorst - thanks - that seems to fix it for me.

[mmmpie]

I've been dealing the same problem this morning. The only error that I see in IE9 is the OpenType embedding check. The embedding flag in the ttf file is a red herring. IE9 should be using the woff file, but it was getting a 404 when it tried to download it so it fell back on the ttf file.

In my case the problem is IIS 6. It does not serve files without a mime type. On our staging server someone had added a wildcard mapping which served files as application/octet-stream, but that mapping was not in our production server. IIS 6 has mime types for eot and rtf files already, but not woff. You can add it at the computer level, but it wont take effect until the IIS processes recycle. If you add it at the site level it will take effect immediately.

[muloka]

Thorst that worked for me as well. Thank you.

[ramx]

Thanks @thorst, worked for me as well :)

[davegandy]

Interesting thread. I'll look into this for the upcoming 2.1 release.

[inspire22]

Did you test it with a cross-domain CDN? I think this still fails on IE9 when the font doesn't have full "Installable" permissions. Only solution seems to be to edit the font permissions or serve it from the local server.

[ashrobbins]

Just wanted to post and say that I was having the same issue on IE9 with boxes showing instead of the icons. But the change suggested by thorst above has fixed the issue for me.

[pgdesjardins]

If you are serving the files from IIS the .woff file will fail to load because of an unrecognized mime type.
Chrome will fallback to the .ttf file and ie7/ie8 are using the .eot file anyway.

just add the mime type in IIS configuration or add the mime to the web.config of your .net app

<system.webServer>
 <staticContent>
  <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
 </staticContent>
</system.webServer>

[jmclocklin]

I second the solution to just adding the MIME types in your .NET application's web.config. This way you don't have to worry as much about deployment problems. It solved this error for me.

[RayChiu521]

thanks thorst it's works for me.
my situation is two server -- iis6, iis7, both have same website.
and client is IE10 in Win8
if open website on iis7 is fine. but error on iis6.

[davegandy]

Version 3.0 has been checked in IE9. Let me know if there are still issues.

[shweta612]

thanks thorst - it fixed my prob...:)

[WebReflection]

same problem in IE9 Mobile, has anyone solved this ? Thanks

[zanedev]

use a cdn for the font files, seems to have fixed it for us. must be related to the headers or something

[tagliala]

If you could point me to a proper server configuration, I will add that to the troubleshooting guide

(server configuration isn't up to us)

[WebReflection]

I don't think it's a CDN problem, here a screen shot with the FontAwesome site itself, but going to MaxCDN produces same result: squares all over

[zanedev]

So we use the bootstrap cdn: //netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css

Which definitely fixed it for us, maybe inspect those headers, or maybe pulling from remote source did it not sure but that worked for us across all IE's and every situation we have seen so far..

[tagliala]

@WebReflection

Oh I miss mobile. IE9 mobile doesn't support webfonts, as you can see in the "Font Awesome" font itself.

http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx#BKMK_Supportedstandardsandtechnologies

Quite astonishing but that's it.

[WebReflection]

yep, that's what I've realized ... regardless, I've put a link to test on IE9 Mobile with version suggested by zanedev ... maybe it will show :-)

Update nope, I've just confirmed IE9 Mobile does not support web fonts at all. Oh well, thanks for hints anyway

[zanedev]

ah yeah we arent targeting ie9 mobile at this point... fixed all desktop issues we were having though

[WebReflection]

btw, when I say I need FontAwesome for IE9 Mobile too, I mean it :P

so here the proof in WP7 and IE9 Mobile

here the repository - it is Mit Style because I use a system called gitstrap that puts that automatically but this would be actually a WTFPL since the magic about all icons is done by the FontAwesome SVG file ... I've just created an ad-hoc SVG path parser in order to draw them on canvas.

You can test the whole thing in this demo page where every browser should use the FontCawesome version and not the original icon hack.

If you want a pull request or any improvemente that won't take too much time (I really just needed to not show few awesome icons as squares for WP7) feel free to open a request in the repo.

If you want to take care of the whole script, I can push request it.

All the best and thanks for this awesome font :-)

[pvoborni]

hi, the original issue (CSS3114) should be fixed by setting the embedding permissions to "installable" for TTF variant - tested (changed in Font Forge). I have no idea how to do it properly, so I can't provide a patch.

Anyway discussion about CSS3117 (CDN issue) is just offtopic.

[pvoborni]

In can be fixed by tool like ttembed: https://github.com/hisdeedsaredust/ttembed during build or by font authoring tool if it supports it.