Question

I’ve searched for similar questions but still have not found a solution as to why my @font-face rule does not work in IE7. Here’s the live link of my demo:

http://www.staging.jungledragon.com/experiments/v3_02/

As you open up this site in a modern browser, you’ll notice the global navigation has icons to supplement the navigation labels. Those icons come from a font, called “FontAwesome”.

I’m declaring my @font-face rule as follow, as per the best practice recommended in many places:

@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.svg#FontAwesomeRegular') format('svg'),
        url('../type/fontawesome-webfont.woff') format('woff'),
        url('../type/fontawesome-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

As mentioned, it doesn’t work in IE7, it doesn’t even seem to load the font at all. I’ve tested both on Windows 7 using IE9 in IE7-mode, as well as on an XP machine with native IE7. I’ve also tried using absolute paths to the font files, but it makes no difference.

As I am using these font icons throughout my design, I’d love for this to work in IE7. Any ideas?

Answer 1

Try adding a conditional link to your page, linking to the separate font-awesome-ie7.css that Font Awesome provides.

<!--[if IE 7]>
  <link rel="stylesheet" href="css/font-awesome-ie7.css">
<![endif]-->

See Issue #38 for more details.