Search code examples
cssgoogle-webfonts

google webfont not working in IE

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.

Solution

  • 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