Montserrat font isn't displayed on IE 10 and 11

Question

In this website http://themescreators.com/ela/ I am using some google fonts. All of them work well on Chrome, FF.. but on IE 10 and 11 on Windows 7, "Montserrat" font doesn't display. I have really not idea about what can be the issue, is IE incompatible with some google fonts?

If you visit the site on windows 7 you will see clearly the issue, all "Montserrat" h1, h2... aren't visible.

Thanks in advance!

Graz

Works for me (I can see the headers, they look the same as in Chrome) on Win8.0 Enterprise x64 with IE 10.0.9200.17028, so it's probably not a general IE10/11 issue. – Dairyman

Like I said, the iisue is only on Windows 7 no on Windows 8 – Graz

You are right, IE11/Windows 7 and it doesn't work. – Conscription

I've just had exactly the same issue. @leepowers answer sovled it. – Ningsia

Answer 1

First of all, you don't have defined any secondary font which can be displayed if the Montserrat isn't load properly. That's the reason why no font is displayd.

h1, h2, h3, h4, h5, h6 {
   font-family: Montserrat;
   font-weight: 400;
   font-style: normal;
   color: #1C2334;
}

I recommend you to set up font-family properly and add more fonts for this cases.

Secondly, Montserrat isn't load properly because this is bug of IE11 which has been reported on Google Font Directory as well as on the MSDN Forum. Unfortunately it hasn't been fixed yet.

One solution can be download Google Web Fonts, upload them whith your website and define them in the css files manually. Another way may be usage of JavaScript Web Font Loader instead of the default one.

Conscription

Answer 2

I encountered a similar bug, and even having a fallback font did not fix the issue. The Montserrat font was loading fine so the fallback was never loaded.

As it turned out, using the CSS rule font-feature-settings caused this particular font to stop displaying altogether in IE10 and IE11 on Windows 7. (Though it would probably cause similar issues for other fonts).

The fix was to disable the low-level font tweaks of font-feature-settings, using the IE vendor-specific prefix:

/* Fix for IE10 and IE11 Montserrat font display issues. */
p {
    -ms-font-feature-settings: normal;
}

If possible, it's probably best to avoid font-feature-settings altogether. OR make sure you have testing regimen in place to test the various IE browser versions on each Windows OS. Especially since font rendering is not just a browser feature, but also a function of the underlying OS.

Bacteria

This is what worked for me; I had font kerning turned on. This resets back to normal in IE – Ningsia

Just to elaborate, the place to put this is not necessarily on the p element (or whichever element has the problem), but wherever in your stylesheet you've used font-feature-settings (ie. overriding it for, say, headings - where you've used the problem font - may not fix the issue if you've specified font-feature-settings on a parent element. You'll need to apply this solution there) – Cardsharp