Google font is not working in IE11

Question

i am trying to use Google font Muli in my website. i can see font is working in chrome,FF and opera perfectly.

when i am opening my website in IE9,10,11 its not at all taking font. i have tried following methods but still no luck.

Method 1 :

<script type="text/javascript">
 WebFontConfig = {
 google: { families: [ 'Muli::latin' ] }
};
(function() {
 var wf = document.createElement('script');
 wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
 wf.type = 'text/javascript';
 wf.async = 'true';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wf, s);
})(); </script>

Method 2 :

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

Method 3 :

  @import url(http://fonts.googleapis.com/css?family=Muli);

I found something shocking is, IE is not at all loading http://fonts.googleapis.com/css?family=Muli url. i have tried loading same url in new window and its not responding but same is working in other browsers.

Is there anything do i need to include to work it in IE?

Answer 1

Are you testing locally or on a live website? IE has issues with Web Fonts over HTTPS (which could be your issue).

Answer 2

OK - Will the OP please check and see if the site is local "intranet" site, like the local machine or a nearby machine on the local network. If so, open Compatibility View settings and uncheck the box at the bottom that says to render all Intranet sites in compatibility view.

Compatibility View causes it to send an MSIE 7.0 User Agent string to not only the web-server, but also to resources that server says to load. This means that Google see's an MSIE 7.0 User-Agent and assumes you want EOT fonts rather than WOFF format. This is why Google is getting the blame for sending different stuff to IE. IE is lying and saying it's ancient. When you turn off that checkbox, Google will see the new User Agent string and it will work!

Also it appears that you need both initial-scale and minimum-scale set in your meta tag to get a decent rendering engine. At least that seemed to be the change that fixed layout for me (previously I only used initial-scale)

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">