Google font in IE8: Correct font displayed briefly on page load, then overridden

Question

Problem:

In IE8, the h1.startpage-heading should be "Roboto", font-weight 100. If possible also in IE7.

Background:

I've read up on SO and on http://code.google.com/p/googlefontdirectory/issues/detail?id=9 (please see post #13).

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:

@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;
}

Case:

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.

More background:

The problem was not solved when I tried putting !important after 'RobotoThin' in the IE8-CSS.

Thanks!

Answer 1

Problem solved for IE7-8:

Found out that you must serve fonts from the same domain as the index.html for IE7-8, you can't link to other domains such as http://themes.googleusercontent.com.