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