CSS3111 error when embedding FontAwesome font in IE8

Question

I am using FontAwesome (http://fortawesome.github.com/Font-Awesome/) as a web font on my page:

http://www.jungledragon.org/apps/jd3/

My issue is that the font fails to load in IE8 (standards mode), instead square blocks are shown. Since these icons are essential for the design, I'm eager to fix this.

I have researched a lot of questions and answers already, so let me tell you what I did to troubleshoot this. First, I'm using the recommended format for embedding this font:

@font-face {
  font-family: 'FontAwesome';
  src: url('../type/fontawesome-webfont.eot');
  src: url('../type/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
  url('../type/fontawesome-webfont.woff') format('woff'),
  url('../type/fontawesome-webfont.ttf') format('truetype'),
  url('../type/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

This is the de facto standard for loading fonts x-browser, and the same output as generated by tools like FontSquirrel. The type directory is relative to my CSS directory, and this font will load in all browsers except IE8.

Second, I have cross domain origins enabled (CORS), so that is definitely not the issue.

Some people suggest that loading the html5 shiv may interfere with IE8 loading the font, but removing the shiv loading alltogether still does not make a difference.

The site is running on Apache2, adding mime types seem to not make any difference to the result. Also, I can confirm that I can download the eot file from IE8 using the direct path, so the file is definitely accessible.

I have no idea what I am doing wrong, but it must be something on my end. The reason is simple: opening the official FontAwesome website from IE8 will load the font just fine. In addition, the secondary font that I am using (the one used in the site's logo) also renders just fine. That second font comes from Google webfonts, whereas the fontawesome font is hosted on the same domain as the site.

I'm running out of ideas on how to solve this, any clues?

Update: I should add that in the IE developer toolbar, this is the error I am getting:

CSS3111: @font-face encountered unknown error. fontawesome-webfont.eot

I found this article discussing the error:

http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/

...yet I don't see a solution inside that helps me.

Answer 1

Ultimately, this answer solved my issue:

https://stackoverflow.com/a/12459447/80969

I had to edit the ttf file that came with the fontawesome download pack using an obscure font editing program. In there I renamed the "Human font name" to be the same as all other "name" fields. Next, I used http://www.font2web.com/ to generate a new .eot file and integrated it in the project, keeping everything else the same. And presto, it works!

It looks like my version of font-awesome had the issue built right into the download.

Answer 2

Could be worth checking http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/ also.