Google Fonts not working in Internet Explorer (IE) 11

Question

Currently putting together a site using Google Fonts. Everything works in IE6 through 10, Firefox, Chrome, and on mobile browsers. However on IE 11 no fonts load and everything is displayed using fallback fonts (sans-serif etc).

This same issue seems to have been discussed on the following two pages but with no resolution:
Google Code
MSDN Forums

I have not been able to find a solution either and am wondering if anyone here has a workaround in place.

Solution 1

Using the Web Font Loader javascript instead of the default method of adding fonts works in IE11 for me. https://developers.google.com/fonts/docs/webfont_loader.

It also had the advantage of having default font text showing on slow connections until font downloads, at which point it will switch to google font. Otherwise you get no text at all for tens of seconds.

Important note: You should choose your fall-back fonts to those with similar size / kerning / leading etc to minimise screen re-draw and content jumping issues that affect UX.

Solution 2

I had the similar problem. Fonts from css didn't load in IE11 only when i pressed refresh or forward/back buttons. I've managed to solve this problem adding an empty 'style' tag to head on document load. (ex.: $('head').append('<style></style>')) Hope this will help to somebody with the same problem.

Comments

[Evster]

I was having a similar problem with IE 11 (and 10) rendering my custom Google font with an incorrect width. The page was rendering elements based off of the default body font, and then applying the Google font at a later point. This tip fixed my problem and worked for me.