Google web fonts not rendered in IE8

Question

I have looked at this: Google Web Fonts don't work in IE8, and this: How to make Google Fonts work in IE?. Neither works for me. The first suggests not to import too many fonts at once, while the latter is out of date since the bug was fixed back in 2010.

The HTML is as follows:

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <title>Font Test</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta name="description" content="Google Fonts Test">

                <link type='text/css' href='https://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet'>
                <link type='text/css' href='https://fonts.googleapis.com/css?family=Play:700' rel='stylesheet'>
                <link type='text/css' href='https://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet'>
                <!--<link type='text/css' href='//fonts.googleapis.com/css?family=Lato:900' rel='stylesheet'>-->

                <link type="text/css" href="https://static.mysite.com/blah/font-test.css" rel="stylesheet">
        </head>
        <body>
                <div class="page-title">
                        This Is Title
                </div>
                <div class="page-content">
                        This is content
                </div>
        </body>
</html>

This is the corresponding CSS:

body {
        height: 100%;
        width: 960px;
        min-height: 550px;
        max-height: 1080px;
        margin: 20px 60px 40px 20px;
        padding-left: 10px;
        padding-right: 10px;

        background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKklEQVQIW2OceOe1cb6K6FkGJAASYwTxkSVhbLAETBJEw3Tjl8BqFC7LAdSSJR3onNbEAAAAAElFTkSuQmCC) repeat;
}

.page-title {
        height: 55px;
        font: 38px "Play";
}

.page-content {
        font: 16px "Cantarell";
        width: 630px;
        text-align: justify;
}

The above is tested in latest Chrome, which works fine. It however does not work in IE8 for some reason. Anything I am missing?

UPDATE: IE8 simply does NOT work with Google Fonts API. In fact, if I use IE8 to browse the specimen of many fonts on the Google Fonts API pages, none of them renders correctly. The only sure way to use these fonts is to convert them to EOT type (among with WOFF type), and serve them from your server, which is a shame because you cannot use Google's CDN anymore.

Have you tried writing your rules like `font-size: 16px; font-famil...`? — Rchristiani, Nov 22 '12 at 20:09
@Rchristiani, yes, I just tried but still not working. However, I notice in IE8's developer tool that `font-family: "Play"; FONT-SIZE: 38px` and `font-family: "Cantarell"; FONT-SIZE: 16px`, which seems like `font-size` property is merged into `font-family` property - that is odd... — skyork, Nov 22 '12 at 20:28
Doubt it will help, but it's better for performance to use `https://fonts.googleapis.com/css?family=Cantarell|Play:700|Muli:300` instead of the multiple requests. — Rich Bradshaw, Nov 22 '12 at 20:41

score 1 · Answer 1 · answered Nov 23 '12 at 00:17

I'm confused by the other answers and comments so I'll just throw this out there. Whenever you use data uris, attributes or sets, you are venturing into an area IE does not fair well in by not supporting it or limiting it. Only modern browsers handle them correctly but I'm doing this from my phone and can't go into it any further. Checkout http://caniuse.com/#search=data

score 0 · Answer 2 · answered Nov 22 '12 at 20:51

0

It’s not uncommon to have problems with some Google fonts on some browsers especially when used remotely (the way Google recommends). It often helps to download the fonts, generate the font files using e.g. FontSquirrel and then use them as uploaded onto your server.

answered Nov 22 '12 at 20:51

Jukka K. Korpela

195,524
37
270
390

I just trie the font used in this post:http://stackoverflow.com/questions/9050747/google-web-fonts-dont-work-in-ie8, which was resolved to work in IE8. But still, in my case, it does not render so it must be something else rather than individual font compatibility issues. – skyork Nov 22 '12 at 21:41
I just tested my suggestion for the Cantarell font, and it works just fine on IE 9, on which direct use of the font from the Google server fails. Besides, the rendering is slightly better on Firefox. Now, looking at the console log in IE 9 developer tools (F12), I can see a message about failure due to cross-origin request. This probably occurs only when you use Google fonts directly in *local* documents in IE 9 – on a server, they probably work OK. But downloading the fonts etc. is still advisable. – Jukka K. Korpela Nov 22 '12 at 23:03
1

thanks for trying it out. I am using it on a server, in addition, we are talking about `IE8` here. I think font support in `IE9` has improved from `IE8`. I think I am going to try this: http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/ – skyork Nov 22 '12 at 23:15
The page you mention suggests the same approach as I described and tested. – Jukka K. Korpela Nov 22 '12 at 23:27

Google web fonts not rendered in IE8

2 Answers2