Question

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?

Answer 1

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.