Custom font renders buggy in IE8 - html

Question

Due to specific client requirements, I need to use IE8 as the main browser for a website, for which they require that a custom font of their own be used on the page headings. H1's to be more precise.
The problem I'm having is that on exactly the same page (whatever the page), the heading is sometimes correctly rendered using the custom font, but other times IE8 messes up the text and apparently applies the fallback font.
Bellow are two screenshots, one with the font correctly applied, one with it not being applied:
Good font:
Bad font:
I have the following stylesheet where I define the rules for that custom font. I apologize in advance, but I cannot make the name of the font public (NDA in effect).
#font-face {
font-family: 'secretfont_exbregular';
src: url('../fonts/secretfontexbd-webfont.eot');
src: url('../fonts/secretfontexbd-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontexbd-webfont.woff') format('woff'),
url('../fonts/secretfontexbd-webfont.ttf') format('truetype'),
url('../fonts/secretfontexbd-webfont.svg#secretfont_exbregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'secretfont_ltregular';
src: url('../fonts/secretfontlt-webfont.eot');
src: url('../fonts/secretfontlt-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontlt-webfont.woff') format('woff'),
url('../fonts/secretfontlt-webfont.ttf') format('truetype'),
url('../fonts/secretfontlt-webfont.svg#secretfont_ltregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'secretfont_rgregular';
src: url('../fonts/secretfontrg-webfont.eot');
src: url('../fonts/secretfontrg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontrg-webfont.woff') format('woff'),
url('../fonts/secretfontrg-webfont.ttf') format('truetype'),
url('../fonts/secretfontrg-webfont.svg#secretfont_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'secretfont_rgbold';
src: url('../fonts/secretfontrgbd-webfont.eot');
src: url('../fonts/secretfontrgbd-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontrgbd-webfont.woff') format('woff'),
url('../fonts/secretfontrgbd-webfont.ttf') format('truetype'),
url('../fonts/secretfontrgbd-webfont.svg#secretfont_rgbold') format('svg');
font-weight: normal;
font-style: normal;
}
And the stylesheet where I set the font-family for the headings:
h1 {
color: #E60000;
font-family: 'secretfont_ltregular', Arial, Helvetica, sans-serif;
font-size: 36px;
}
I've tried everything I could think of but can't seem to get a consistent behavior out of IE8. What can I do to make it work as it should?

Answer 1

I had a similar issue - all EOT files were being successfully loaded by IE8 but only sporadically applied. After a lot of frustration the only thing that seemed to work is adding the chrome frame meta tag just below the tag:
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
Be aware that chrome frame stops being supported January 2014 http://www.chromium.org/developers/how-tos/chrome-frame-getting-started