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?

Check IE's console. Any errors there? Method 2 should work in IE11 for sure. — Victor Levin, Jul 29 '15 at 18:30

score 2 · Answer 1 · answered Jul 29 '15 at 18:45

2

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

answered Jul 29 '15 at 18:45

Allen Brooks

21
2

Thank you! this saved my time. FYI, it is to do with the `Pragma` header – Kunal Jan 02 '18 at 19:43

score 2 · Answer 2 · answered Jan 06 '17 at 12:40

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">

Good guess!To fix it I downloaded the .woff and .woff2 fonts from Google and put them to my own server, and it fixed the problem. Thanks — AymKdn, Oct 06 '17 at 14:44

score 2 · Answer 3 · answered May 07 '20 at 10:18

I found that in the google fonts style sheet only uses woff2.
https://fonts.googleapis.com/css?family=Muli

And, according to caniuse, ie11 doesn't support woff2. :O
https://caniuse.com/#feat=woff2

My solution to use Google Fonts in ie11 was to actually download my font from Google Fonts and use the ttf files that came inside the zip file as so,
How to include a font .ttf using CSS?

NOTE: I don't know if all Google Fonts have ttf when you download them. But, mine did, so this worked for me. Maybe someone can follow up my answer if they know this! :)

score 1 · Answer 4 · answered Jul 29 '15 at 18:39

1

Method 3, working for me fine! Check it please on JSFiddle.

HTML

<h1>Hello world!</h1>

CSS

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

h1 {
    font-family: 'Muli', sans-serif;
}

answered Jul 29 '15 at 18:39

AleshaOleg

2,171
1
15
29

Google font is not working in IE11

4 Answers4