CODEWITHSUNDEEP
cssgoogle-webfonts
Duke
Duke

Reputation: 36970

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.

Upvotes: 2

Views: 8306

Answers (3)

Duke
Duke

Reputation: 36970

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:).

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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.

Upvotes: 1

Caelea
Caelea

Reputation: 2348

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

Upvotes: 6

Related Questions