Font support on Internet Explorer, WOFF v.s. WOFF 2.0
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.
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.
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.