Search code examples
cssinternet-explorer-8font-face

Incorrect font weight displaying in Internet Explorer 8

I'm testing a page in Internet Exploder 8, and I'm failing to get one of the Google hosted fonts to render the correct weight. Given the following code:

@import url(http://fonts.googleapis.com/css?family=Lato:100,400);

h1{
    font-family: 'Lato-Thin', 'Lato', sans-serif;
    font-size: 80px;
    font-weight: 100;
}

p{
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

The paragraph tags renders in 400 weight, but so does the heading. If I change the import line to:

@import url(http://fonts.googleapis.com/css?family=Lato:100);

The heading no longer renders in Lato, even though the 100 weight is still downloaded.

Is there a way round this?

Here's a Fiddle.

Solution

  • It appears that this is a compatibility issue between the way Google serves its custom fonts, and how IE8 would rather them served.

    Issue 9 here: https://code.google.com/p/googlefontdirectory/issues/detail?id=9

    A workaround is possible if the fonts are stored locally, but that doesn't directly address the problem described in my question.