We’ve been having some problems with the rendering of Google Fonts in IE. Here is an article some might find useful on Smashing Magazine.

Recap of the Smashing Magazine article:

It basically says that you must use the font-weight specified by Google e.g. 400, 300, 700. Using font-weight:bold is not a valid weight when using Google fonts. You should use font-weight:700. When using font-weight:bold the browser uses the regular/default font weight and tries to make a bold version from it.

Also keep in mind this scenario:

<div class="container"><h1>Hello</h1></div>

If you apply weight to .container of font-weight:400, there is still a default (browser inherited) font-weight:bold being applied to the h1. This is currently not removed in the reset.css style sheet.

Google fonts are supported well on all modern browsers and IE9 and above. IE7 and IE8 have limited support where fonts appear to render poorly and weights are a bit weird no matter what is applied.

The explanation…

I think the reason Google fonts aren’t working properly in lower old IE browsers is that Google import multiple weights of a font under the same name, e.g. font-family: Lato; font-weight:700. The older browsers struggle to understand this and prefer each font to have a separate name, e.g. font-family: "Lato Bold".

Unfortunately, this is not supported by Google Fonts unless we host them ourselves. Rich and I have tried this method and still struggling to get it working as desired. More information on this is on Kristen Grote’s blog.

There may little point investing time in fixing these browsers as they are only 10-20% of visits (depending where you look) and decreasing.

So a suggested solution, if this is actually a major issue, is to use Google fonts with correct weights for all browsers and for IE7 and IE8 use an .oldie class to load in a web safe font such as Arial, Georgia, Times etc.

An example:

h1, h2, h3 {
font-family:Lato, Arial, sans-serif;
.oldie h1, .oldie h2, .oldie h3 {
font-family:Arial, sans-serif;

Here is a link to show support of some of the web-safe fonts – CSS Font Stack.

This seems like something that would solve all our problems going forward while retaining custom fonts for the majority of users with very little additional work.

Do you want to know more? Contact us here.