Google Fonts Not Working in Internet Explorer (Ie) 11

Google Fonts not working in Internet Explorer (IE) 11

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.

How to make this Google Font work on Internet Explorer 11

Use:

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

To call it inside your stylesheet and:

font-family: 'Montserrat', sans-serif;

To make something that font..

From google fonts: "Note: For best display in IE, make the stylesheet tag the first element in the HTML section. In IE, if the link is placed after tags, the entire page will block and not display anything until the font is loaded."

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

If that does not work, try this: https://developers.google.com/fonts/docs/webfont_loader#Example

This will make every browser "behave like Firefox".

Google Fonts not working in Internet Explorer (IE) 11

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.

How to make Google Fonts work in IE?

The method, as indicated by their technical considerations page, is correct - so you're definitely not doing anything wrong. However, this bug report on Google Code indicate that there is a problem with the fonts Google produced for this, specifically the IE version. This only seems to affect only some fonts, but it's a real bummmer.

The answers on the thread indicate that the problem lies with the files Google's serving up, so there's nothing you can do about it. The author suggest getting the fonts from alternative locations, like FontSquirrel, and serving it locally instead, in which case you might also be interested in sites like the League of Movable Type.

N.B. As of Oct 2010 the issue is reported as fixed and closed on the Google Code bug report.

---

Related Topics