google webfont not working in IE

Question

I am experiencing some strange behavior with Google web fonts. Now I am using it just like embedding style sheet, it working fine.

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Orienta' rel='stylesheet' type='text/css'>

But when I used this @font-face values to my css file , its not working properly.

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Orienta';
  font-style: normal;
  font-weight: 400;
  src: local('Orienta'), local('Orienta-Regular'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/nPJ0J30J_zQZtBhztPPbaA.woff) format('woff');
}

What is happening to these code, I think its same in action above both. Any idea guys?

Note. Also I am planning to download this fonts to my system and load it from the server. Thanks in advance.

This [answer](http://stackoverflow.com/a/27696481/769678) just helped me save a lot of time. [GitHub](https://google-webfonts-helper.herokuapp.com/) — Shubh, Jun 18 '15 at 15:35

score 6 · Accepted Answer · answered Oct 15 '12 at 13:35

6

You need to have an .eot extension for your fonts to work in IE. You can use the generator here http://www.fontsquirrel.com/fontface/generator

answered Oct 15 '12 at 13:35

Caelea

2,318
15
22

yes, download it from google fonts (the ttfs), upload them in fontsquirrel.com convert them and download the font kit, so you will have the .eot files and a sample css script – Junior Mayhé Oct 15 '12 at 18:56

score 1 · Answer 2 · answered Oct 15 '12 at 14:07

IE does not understand the WOFF format. So you should use CSS code that deals with different font formats, like the Google code does. The simplest way is to visit Google Web Fonts site and download the font package there; it contains the different formats as well as CSS code for using them.

Duke · Answer 3 · 2017-10-10T05:15:45.943

You are right @Caelea, I need to add an .eot extension for my fonts to work in IE.

Finally digging more in to the problem, I got a solution. I just paste the below url in navbar of IE.

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Orienta

Then I got the releveant css for IE( with .eot files) and webkit browsers as well. I downloaded each font and saved to my application code. Now its working fine in site

See below code

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot);
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Orienta';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/orienta/v1/4h2F_2nQc3QO1h97-0ufEg.eot);
  src: local('Orienta'), local('Orienta-Regular'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/4h2F_2nQc3QO1h97-0ufEg.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/nPJ0J30J_zQZtBhztPPbaA.woff) format('woff');
}

Thanks guys for immediate response. So many thanks to @Jukka K. Korpela for sharing me a great idea

Edit

To get the google font eot, I have browse the font website in IE, so google loaded the IE supported font there:).

google webfont not working in IE

3 Answers3