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!

Answer 1

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.

Answer 2

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.