CODEWITHSUNDEEP
htmlcssinternet-explorerfontsgoogle-font-api
Kalpit
Kalpit

Reputation: 4936

Google font is not working in IE11

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?

Upvotes: 3

Views: 4520

Answers (4)

Tom
Tom

Reputation: 601

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! :)

Upvotes: 2

Evan Langlois
Evan Langlois

Reputation: 4353

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

Upvotes: 2

Allen Brooks
Allen Brooks

Reputation: 21

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

Upvotes: 2

AleshaOleg
AleshaOleg

Reputation: 2201

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;
}

Upvotes: 1

Related Questions