Google Font API not working in IE, why not? Should I consider alternatives?

HTML & CSS
1

I’ve tried Google API font and found that it doesnt render the font in Internet Explorer 8, but it does in other browsers. The specific site I’m referring to is here. I’m trying to get the “Test Font Goes Here” text to have the font applied.

In my HTML I have:


<h7>Test Font Goes Here</h7>

In my header.php file (I’m using WordPress) I have:


<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Monoton">

And in my stylesheet I have:


h7 {font-family: Monoton, Verdana; font-size:40px; color:red;}

So shouldn’t it be working in IE? At the very least, I would think the font-size:40px would and red color would apply, but it’s not and I’m baffled. Google search showed some articles where people said Google Font API doenst play nice with IE. So am I doing something wrong? Or should I abandon Google Font API for Font Squirrel if I want something Free that works across alll browsers?

Please advise. Thanks in advance!

2

I’ve never heard of an h7 element and neither has ie8 so that’s why it doesn’t style it :slight_smile:

You can’t put a heading element inside a p element anyway as that is invalid and will also break IE.

Try it with a valid html element and see if that fixes things.

3