Google Font Weights in Internet Explorer

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

Font Weight Test-case

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 a 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.

I think the reason Google fonts aren’t working properly in lower old IE browsers is because 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;
font-style:normal;
font-weight:700;
}
.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.

Thanks to Rich Jones for help with this.

Image Credit: font weight test by nickobec, on Flickr


Share this article

Posted in Uncategorised

Call us on 01785 279920

Our friendly Magento experts are happy to answer your questions.

Contact us now

Email alerts

Get the latest eCommerce news, reviews and expert advice in your inbox.