ie8 not rendering/loading #font-face fonts on first page load - css

Question

All other browsers - FF, Chrome, Safari, Opera and IE9 - works fine.
But in IE8 it wont load the #font-face font - but if you navigate to another page and then return, the font renders/loads fine.
See image:
Top: Text as seen once you navigate to another page, Bottom: as seen when the site first loads
CSS code:
#font-face {
font-family: 'FontNameHere';
src: url('/font/webfont.eot');
src: local('?'), url('/font/webfont.woff') format('woff'),
url('/font/webfont.ttf') format('truetype'),
url('/font/webfont.svg#webfontkKNhbsUZ') format('svg');
}
Thanks in advance.

Answer 1

Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the WOFF (Web Open Font Format) font.
Firefox, Chrome, Safari, and Opera support fonts of type TTF (True Type Fonts) and OTF (OpenType Fonts).
Chrome, Safari and Opera also support SVG fonts/shapes.
Internet Explorer also supports EOT (Embedded OpenType) fonts.
Note: Internet Explorer 8 and earlier versions, do not support the #font-face rule.
however,
IE8′s relationship with web fonts is a bit more complex than “it doesn’t support it”. It does actually support them, but in a way that makes using them a pain.
There are five types of web font formats:
Embedded Open Type (EOT)
TrueType (TTF)
OpenType (OTF)
Scalable Vector Graphics (SVG)
Web Open Font Format (WOFF)
Of the bunch, WOFF is going to become the standard. It’s supported by Chrome, Firefox (since 3.6), Opera, Safari, and IE9.
Of course IE8 knows nothing about WOFF and instead exclusively supports EOT (to be fair, this is largely because IE8 preceded WOFF). This means that to use a web font which can be displayed in both IE8 and other browsers, you have to supply EOT and WOFF formats.
To make matters worse, IE8 has a bug which prevents it from loading more than one format for the same font. Fortunately, there is a hack you can use.
Anyway, here’s the cross-browser CSS for #font-face
#font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: 300;
font-style: normal;
}
In this example, I’m using a font called Open Sans and its multiple formats (EOT, WOFF, TTF, and SVG) which are stored in the “fonts” folder on my site.
If you’re wondering why I included the SVG format, the answer is because mobile Safari (iPhone/iPad) supported only this format until version 4.1.

Answer 2

I know this is an old question, but it comes up quite high on Google searches so I thought there might be some value in adding an answer here...
I have not yet come to a definitive answer, but I was unable to find others suffering the same symptom you're describing.
Generally, with IE8, webfonts either work or they don't -- but I was having them not load on some page loads (usually but not always the first), and seeing them sporadically not load from page to page on a site I'm working on.
I use a separate development server and this problem only occurs there, not on production!
I haven't yet figured out why this is the case. My first instinct was MIME types for EOT fonts, so I added one on my dev server. That didn't fix it. I haven't had time to fully diagnose, and since production is more important and I'm quite busy I probably won't be able to dig in any further for a bit - but perhaps someone will see this at the top of some google results and it'll be a catalyst for them to figure out the issue...