Magento Imagine Awards 2019 Finalist

Google Font Weights in Internet Explorer

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.


Subscribe via email

Sign up to get notifications of new posts by email.

Share this article

Posted in Design, Digital Marketing

Other posts you might like

If you’re building a new website for your business, responsive web design should be top of your priority list. Some…

Conferences allow us to look outwards, to recharge our enthusiasm for the web and to inspire us to continue making…

Typography is probably the most important thing to get right on the internet. Text is everywhere, I challenge you to…

Call us on 01785 279920

Our friendly Magento experts are happy to answer your questions.

Follow us!

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

To find out more about how we use your data, read our Privacy Policy