I'm using a web font for icons instead of image files. I was given the original font by a designer, and then I made the full set through Font Squirrel's @font-face generator. I opened up the test *.html file that they deliver along with the exported fonts, and it worked consistently in every browser I looked at (including IE7).
I installed the font on my server, and again it worked consistently in every browser I tested (including IE9) except IE7. The strange thing is that it works about half the time in IE7. So if I just repeatedly refresh the page, then it will randomly work about half the page loads, and not work the other half.
I have cleared the cache several times through the 'Developer Tools' window.
Here is the CSS I'm using to include the font:
@font-face {
font-family: 'iconRegular';
src: url('/static/fonts/icon-webfont.eot');
src: url('/static/fonts/icon-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/icon-webfont.woff') format('woff'),
url('/static/fonts/icon-webfont.ttf') format('truetype'),
url('/static/fonts/icon-webfont.svg#iconRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.icon,
.ui-widget-content .icon {
font-family: 'iconRegular';
font-weight: normal;
font-style: normal;
font-variant: normal;
}
I am using this in a massive application (~20 *.js files loaded through require.js); is it possible that this is related to the size of my application?
This seemed to be a bug in IE7/8 @font-face handling that showed up in heavyweight web applications (my app had ~25 stylesheets and ~50 Javascript script tags). I fixed it by browser sniffing for IE7/8 (for shame!), waiting 500 ms after page load, then adding a second <link> tag to the stylesheet containing the font declaration.