title: Custom font renders buggy in IE8
body: <p>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. </p>
  
  <p>Bellow are two screenshots, one with the font correctly applied, one with it not being applied:</p>
  
  <p>Good font:
  <img src="https://i.stack.imgur.com/Em6Ds.png" alt="good font"></p>
  
  <p>Bad font:
  <img src="https://i.stack.imgur.com/dsuUY.png" alt="bad font"></p>
  
  <p>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).</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>And the stylesheet where I set the font-family for the headings:</p>
  
  <pre><code>h1 {
      color: #E60000;
      font-family: 'secretfont_ltregular', Arial, Helvetica, sans-serif;
      font-size: 36px;
  }
  </code></pre>
  
  <p>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?</p>