Font support on Internet Explorer, WOFF v.s. WOFF 2.0

Published in

Minitheory Design

5 min readNov 16, 2017

We recently completed a project for a big client; it was one of the most significant projects I have worked on in my career thus far.

It involved several parties, the client, us (Design & Front End Development), and the system integrator (SI), plus there were legacy code and limitations involved, which was not exactly ideal, but workable.

The horror came on the day the project was meant to launch. John, our point of contact over at the SI, messaged me on Slack:

“Hey Jacob, the font doesn’t load on IE”
“What? Let me check and get back to you.. did this issue occur recently?”
“No.. we only realised it today.”

We were focused on getting the site up in time that we overlooked the fact that the font was not loading on IE, and it did not help that the fallback font looked really similar. The solution was pretty simple, but encountering such an issue on the day of launch, coupled with project fatigue, I panicked.

After taking a moment to collect my thoughts, I began to understand the problem we have.

The Problem

The font does not load on IE. I began by looking at the project on IE 10 and 11, the only two IE browsers that, thankfully, we had to provide support for.

We used Muli, a Google font available for use. It worked on Chrome, Firefox, Opera, the modern browsers, all except IE, of course it had to be IE!

It looked like the font was being loaded, as the fonts were loading in the other browsers. However, it was upon comparing IE 11 and Chrome that it was apparent our font wasn’t loading in IE 11.

Muli and Helvetica can look really similar to untrained eyes. Screenshot of both fonts via Typewolf.com

Finding a solution

Initially, I went the StackOverflow route, by googling ‘Google Font not working in IE11’. There were many suggested solutions, which one included ‘IE has issues with Web Fonts over HTTPS’, which sounded ridiculous and yet somewhat plausible as we were loading the fonts via HTTPS.

We were rushing for time as well, and there were too many variables at play here to know what was causing it. However, with a stroke of luck, John was looking into the issue as well, and came back to me with a StackOverflow link. Turns out, IE 11 does not support Woff2.

First Part of the solution

When we started with the project, we left out support for IE 10 and 11, and went straight to using WOFF2 instead of using WOFF.

WOFF2 has better compression, but it does not have the widespread support of WOFF, which is supported on IE 10 and 11, and also Safari in Mac OS El Capitan and older.

Great! We know what to do then, use WOFF instead! That joy was short-lived however, as Google Fonts provided only the WOFF2 versions of the font… or so I thought.

Second Part of the solution

As it turns out, Google Fonts will provide you the version of the font your browser supports, however, it’s a little tricky.

If you were to google ‘Google Fonts’ and open ‘fonts.google.com’ link, you would encounter a ‘Your browser is not currently supported’ error, and a cute emoji.

Not very helpful on launch day. Screenshot of fonts.google.com on IE 11

It wasn’t a particularly helpful error message at all, yes I know we should be using Chrome, Firefox, Edge and Safari.. but I need the fonts for IE. Perhaps a better error message would be to display a compatibility table like how caniuse.com does wonderfully.

A little workaround I found was that by opening the link to the font family, say Muli, in IE, you would get a WOFF version of the font, together with the individual font weights as well.

<link href=”https://fonts.googleapis.com/css?family=Muli:400,700" rel=”stylesheet”>
Open this link in IE

This would open up notepad with the CSS necessary for embed them into your page.

The result:

@font-face {
 font-family: ‘Muli’;
 font-style: normal;
 font-weight: 400;
 src: local(‘Muli Regular’), local(‘Muli-Regular’), url(http://fonts.gstatic.com/s/muli/v11/kU4XYdV4jtS72BIidPtqyw.woff) format(‘woff’);
}@font-face {
 font-family: ‘Muli’;
 font-style: normal;
 font-weight: 700;
 src: local(‘Muli Bold’), local(‘Muli-Bold’), url(http://fonts.gstatic.com/s/muli/v11/YnOGHDyoFuyOkkXJLPMZhw.woff) format(‘woff’);
}

Solution

Use WOFF instead of WOFF2
Open the font link in IE
Copy and paste it in your CSS/SCSS

And with that, we were able to solve the mystery of the missing font, and ship the product out without much of a hitch.

Aftermath

The feedback on the final product from the client was positive, and they were incredibly happy with months of hard work we had put in together.

Working on this project has also helped our team experience the working complexities of a huge project that requires different teams to come together to work as one.

I was elated when the project came to a close, I have definitely learnt a lot and grew much more not just as a Developer, but also experiencing the importance of teamwork within a project.

Summary

Knowing what browsers you are supporting for, and ensuring that the fonts work in those browsers should always be done first, especially when you have older browsers like IE 10 & 11 in the list. This will help mitigate any potential issues like encountering them on launch day.

CSS Tricks has an amazing write-up on using @font-face and getting the deepest browser support.

Minitheory is a digital design studio based in sunny Singapore with a particular focus on UI and UX design. We make software simple, based on how people think and behave.