title: Google font in IE8: Correct font displayed briefly on page load, then overridden
body: <p><strong>Problem:</strong></p>
  
  <p>In IE8, the h1.startpage-heading should be "Roboto", font-weight 100. If possible also in IE7.</p>
  
  <p><strong>Background:</strong></p>
  
  <p>I've read up on SO and on <a href="http://code.google.com/p/googlefontdirectory/issues/detail?id=9" rel="nofollow">http://code.google.com/p/googlefontdirectory/issues/detail?id=9</a> (please see post #13).</p>
  
  <p>I have put a @font-face declaration in the CSS file that targets IE8. In the @font-face I have renamed the font to 'RobotoThin'. Then I use the declared font-face in the same IE8-CSS file:</p>
  
  <pre><code>@font-face {
      font-family: 'RobotoThin';
      font-style: normal;
      font-weight: 100;
      src: url(http://themes.googleusercontent.com/static/fonts/roboto/v9/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot);
      src: local('Roboto Thin'), local('Roboto-Thin'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
  }
  .startpage-heading {
      font-family: 'RobotoThin';
      color:red;
  }
  </code></pre>
  
  <p><strong>Case:</strong></p>
  
  <p>When loading the page in IE8 the correct font is displayed briefly before being overridden by some other font-family declaration (although the text is still red). When inspecting the heading in the IE dev tool the element seems to inherit from the correct CSS declaration.</p>
  
  <p><strong>More background:</strong></p>
  
  <p>The problem was not solved when I tried putting !important after 'RobotoThin' in the IE8-CSS.</p>
  
  <p><strong>Thanks!</strong></p>