Google font not working in IE11
I am trying to use Google Muli font on my website. i see the font works fine in chrome, ff and opera.
when i open my website in IE9,10,11 it doesn't take the font at all. I tried the 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, IE doesn't load the url at all http://fonts.googleapis.com/css?family=Muli
. I tried to load the same url in a new window and its not responding, but it works in other browsers.
Is there anything I need to enable to work in IE?
source to share
OK. Will the OP check and see if the site is a local "intranet" site, such as the local computer or the closest computer on the local network. If so, open "Compatibility Options" and uncheck the box at the bottom that says to display all intranet sites in compatibility mode.
The compatibility view forces it to send the User Agent string MSIE 7.0 not only to the web server, but also to the resources that the server loads. This means that Google sees the MSIE 7.0 user agent and assumes that you want to use EOT fonts and not WOFF format. This is why Google gets the blame for submitting various things to IE. IE lies and says it's ancient. When you uncheck this box, Google will see the new User Agent string and it will work!
It also seems like you need both an initial and a minimum scale set in the meta tag to get a decent rendering engine. At least it was a change that fixed the layout for me (previously I only used the initial scale)
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
source to share