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.

I included the font, as Google instructs, thus:

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"  
 rel="stylesheet" type="text/css" />

and added its name to the front of a font family in CSS thus:

body {
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif;
font-size: 16px;
overflow-y: scroll;
overflow-x: hidden;
color: #05121F;
}

Works like a charm in Chrome, Firefox, Safari. No dice in IE 8. Anybody know why?

Lamellirostral

A note for the devs using IE11 to emulate back to IE8-: you've got to be sure to switch the user agent string back to the old IE version, as just switching the document mode won't let Google's servers know to send the right font type (EOT). – Grueling

Answer 1

The method, as indicated by their technical considerations page, is correct - so you're definitely not doing anything wrong. However, this bug report on Google Code indicate that there is a problem with the fonts Google produced for this, specifically the IE version. This only seems to affect only some fonts, but it's a real bummmer.

The answers on the thread indicate that the problem lies with the files Google's serving up, so there's nothing you can do about it. The author suggest getting the fonts from alternative locations, like FontSquirrel, and serving it locally instead, in which case you might also be interested in sites like the League of Movable Type.

N.B. As of Oct 2010 the issue is reported as fixed and closed on the Google Code bug report.

Conjunctive

@Yi Jiang, you're right, I'm serving the files locally, with Font Squirrel's more robust @font-face kit and it works just fine. – Lamellirostral

Oh, as for this issue being fixed and closed, Google has many popular webfonts which don't work in IE in 2013. This smells like a deliberate intention "uglify" IE browsing experience. Use Font Squirrel instead as a first choice, until the browsers are finished with their popularity contest. – Limb

It seems to affect all fonts for me in ie9. – Cassock

It is possible though, to make these fotns work in < IE9. See my answer. – Marmoset

Is the issue really fixed? I am using font lato but it still does not gets applied... – Solute

Answer 2

Looks like IE8-IE7 can't understand multiple Google Web Font styles through the same file request using the link tags href.

These two links helped me figure this out:

• See this open Google issue, and look at the comments.
• Also see this StackOverlow Answer Google Web Fonts don't work in IE8

The only way I have gotten it to work in IE7-IE8 is to only have one Google Web Font request. And only have one font style in the href of the link tag:

So normally you would have this, declaring multiple font styles in the same request:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" /> 

But in IE7-IE8 add a IE conditional and specify each Google font style separately and it will work:

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" />
<![endif]-->

Hope this can help others!

Shiri

This should be the accepted answer. An article from Smashing Magazine goes into the issue in depth (and provides the same solution): smashingmagazine.com/2012/07/11/… – Minority

But older IE only supports 32 stylesheets, so this could cause worse problems :( – Sparid

That is only when using the @import at-rule.. not within an IE conditional. @import has always had limitations, not to mention slow performance. I cant see an instance where you will be loading that many style sheets. And if so It is always best practice to combine all style sheets for best performance to limit server requests. – Shiri

Answer 3

Google Fonts uses Web Open Font Format (WOFF), which is good, because it's the recommended font format by the W3C.

IE versions older than IE9 don't support Web Open Font Format (WOFF) because it didn't exist back then. To support < IE9, you need to serve your font in Embedded Open Type (EOT). To do this you will need to write your own @font-face css tag instead of using the embed script from Google. Also you need to convert the original WOFF file to EOT.

You can convert your WOFF to EOT over here by first converting it to TTF and then to EOT: http://convertfonts.com/

Then you can serve the EOT font like this:

@font-face {
    font-family: 'MyFont';
    src: url('myfont.eot');
}

Now it works in < IE9. However, modern browsers don't support EOT anymore, so now your fonts won't work in modern browsers. So you need to specify them both. The src property supports this by comma seperating the font urls and specefying the type:

src: url('myfont.woff') format('woff'),
     url('myfont.eot') format('embedded-opentype');

However, < IE9 doesn't understand this, it just graps the text between the first quote and the last quote, so it will actually get:

myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype

as the URL to the font. We can fix this by first specifying a src with only one url which is the EOT format, then specifying a second src property that's meant for the modern browsers and < IE9 will not understand. Because < IE9 will not understand it it will ignore the tag so the EOT will still be working. The modern browsers will use the last specified font they support, so probably WOFF.

src: url('myfont.eot');
src: url('myfont.woff') format('woff');

So only because in the second src property you specify the format('woff'), < IE9 won't understand it (or actually it just can't find the font at the url myfont.woff') format('woff) and will keep using the first specified one (eot).

So now you got your Google Webfonts working for < IE9 and modern browsers!

For more information about different font type and browser support, read this perfect article by Alex Tatiyants: http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

Marmoset

That's what I did when working with Open Sans Light, 300, 400 fonts families. Some of them did not want to render in FF, and some in IE. So, I found the same solution of using @font-face in .css and it worked. I'm not sure, though if it is a perfect solution since it is using a url, which may be changed in a future – Canker

If you host the fonts yourself it's no problem. – Marmoset

This is not true, the google fonts do send EOT versions. It just detect your browser agent and send you only the necessary type. You can try it emulating in your IE, don't forget to change the user agent string. Tested with pacifico font, Josefin and Source Sans Pro. – Elberfeld

Maybe they do by now, I think they didn't at the time I wrote this answer – Marmoset

Along these lines, IE11 does not support woff2, but does support woff. So, for IE11, I had to download the .woff version of the Google Font. See this article about how to do this: medium.com/minitheory-design/… – Centenarian

Answer 4

While Yi Jiang's solution may work, I don't believe abandoning the Google Web Font API is the right answer here. We serve a local jQuery file when it's not properly loaded from the CDN, right?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script>

So why wouldn't we do the same for fonts, specifically for < IE9?

<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]><link href='/css/fonts.css' rel='stylesheet' type='text/css'><![endif]-->

Here's my process when using custom fonts:

1. Download the font's ZIP folder from Google, and use Font Squirrel's @font-face Generator to create the local web font.

2. Create a fonts.css file that calls the newly created, locally hosted font files (only linking to the file if < IE9, as shown above). NOTE: The @font-face Generator creates this file for you.

   @font-face {
     font-family: 'cardoitalic';
     src: url('cardo-italic-webfont.eot');
     src: url('cardo-italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('cardo-italic-webfont.woff') format('woff'),
       url('cardo-italic-webfont.ttf') format('truetype'),
       url('cardo-italic-webfont.svg#cardoitalic') format('svg');
     font-weight: normal;
     font-style: normal;
   }
   @font-face {
     font-family: 'cardobold';
     src: url('cardo-bold-webfont.eot');
     src: url('cardo-bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('cardo-bold-webfont.woff') format('woff'),
       url('cardo-bold-webfont.ttf') format('truetype'),
       url('cardo-bold-webfont.svg#cardobold') format('svg');
     font-weight: normal;
     font-style: normal;
   }
   @font-face {
     font-family: 'cardoregular';
     src: url('cardo-regular-webfont.eot');
     src: url('cardo-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('cardo-regular-webfont.woff') format('woff'),
        url('cardo-regular-webfont.ttf') format('truetype'),
        url('cardo-regular-webfont.svg#cardoregular') format('svg');
     font-weight: normal;
     font-style: normal;
   }
   

3. Using IE conditional classes in your main stylesheet to avoide faux weights and styles, your font styles might look like this:

   h1{
     font-size:3.25em;
     font-weight:normal;
     font-style:italic;
     font-family:'Cardo','cardoitalic',serif;
     line-height:1.25em;
   }
   h2{
     font-size:2.75em;
     font-weight:700;
     font-family:'Cardo','cardobold',serif;
     line-height:1.25em;
   }
   strong
   ,b{
     font-family:'Cardo','cardobold',serif;
     font-weight:700,
   }
   .lt-ie9 h1{
     font-style:normal;
   }
   .lt-ie9 h2{
     font-weight:normal;
   }
   .lt-ie9 strong,
   .lt-ie9 b{
     font-weight:normal,
   }
   

Sure, it's a little extra work, but haven't we come to expect this from IE? Besides, it becomes second-nature after awhile.

Henton

be careful using this method because some of these fonts could have certain licensing requirements that require them to be served from a hosted server. Just a reminder: ensure that you have a valid license to use the font before hosting them up on your own server. – Justice

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.

Tedman

Answer 6

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

Pronghorn

Answer 7

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/

Crocodilian

Answer 8

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

Gray

Answer 9

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

Rondelet

I don't think it will actually. IE8 and below require a separate link for each of the different font weights. See the answer from @PAPAFRESH above. – Corsair

Answer 10

I had the same problem with you. I found a solution using a Adobe Web Fonts code, work perfect in Internet Explorer, Chrome, Firefox and Safari.

More info in this page: http://html.adobe.com/edge/webfonts/

Madonia

Answer 11

After my investigation, I came up to this solution:

//writing the below line into the top of my style.css file
@import url('https://fonts.googleapis.com/css?family=Assistant:200,300,400,600,700,800&subset=hebrew');

MUST OBSERVE: We must need to write the font-weight correctly of this font. For example: font-weight:900; will not work as we have not included 900 like 200,300,400,600,700,800 into the URL address while importing from Google with the above link. We can add or include 900 to the above URL, but that will work only if the above Google Font has this option while embedding.

Sincerity