How to make Google Fonts work in IE?

Question

I\'ve been developing a site that uses the Google Fonts API. It\'s great, and supposedly has been tested in IE, but when testing in IE 8 the fonts simply don\'t get styled.<

Answer 1

I tried all the options from above and they didn't work. Then I located the google font (Over the Rainbow) in my folder (new) and used IE conditional below and it worked perfect.

<!--[if IE]>
<style type="text/css">
    @font-face {
    font-family: "Over the Rainbow";
    src: url("../new/over.ttf");
    src: local("Over the Rainbow"), url("../new/over.ttf");
    }
</style>
<![endif]-->

I hope it will help

Answer 2

Try this type of link , it will run in also IE . hope this helps .

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>

Answer 3

You can try fontsforweb.com where fonts are working for all browsers, because they are provided in TTF, WOFF and EOT formats together with CSS code ready to be pasted on your page i.e.

@font-face{ 
    font-family: "gothambold1";
    src: url('http://fontsforweb.com/public/fonts/5903/gothambold1.eot');
    src: local("Gotham-Bold"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.woff') format("woff"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.ttf') format("truetype");
}
.fontsforweb_fontid_5903 {
    font-family: "gothambold1";
}

or you can download them zipped in a package with CSS file attached

then just add class to any element to apply that font i.e.

<h2 class="fontsforweb_fontid_5903">This will be written with Gotham Bold font and will work in all browsers</h2>

See it working: http://jsfiddle.net/SD4MP/

Answer 4

It's all about trying all those answers, for me, nothing works except the next solution: Google font suggested

@import 'https://fonts.googleapis.com/css?family=Assistant';

But, I'm using here foreign language fonts, and it didn't work on IE11 only. I found out this solution that worked:

@import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew';

Hope that save someone precious time

Answer 5

For what its worth, I couldn't get it working on IE7/8/9 and the multiple declaration option didn't make any difference.

The fix for me was as a result of the instructions on the Technical Considerations Page where it highlights...

For best display in IE, make the stylesheet 'link' tag the first element in the HTML 'head' section.

Works across IE7/8/9 for me now.