-1

I am trying to find the code that can render font for IE versions 6 to 10. I tested the code from font squirrel, adobe webfonts and Google's font css but there is no code that works for all IE browsers.

Does anyone have the code for that?

Eonasdan
  • 7,563
  • 8
  • 55
  • 82
wailynnoo
  • 349
  • 1
  • 4
  • 11
  • All IE versions, really? From version 1 on? What is the actual problem and with which IE version? – JJJ Mar 11 '13 at 14:26
  • 1
    What's wrong with Google web fonts? It supports IE 6+ https://developers.google.com/webfonts/faq#Browsers_Supported – Billy Moat Mar 11 '13 at 14:27
  • This question has an answer for a IE font-fix, but also contains the syntax you're looking for: http://stackoverflow.com/questions/4607560/font-face-works-in-ie8-but-not-ie9 –  Mar 11 '13 at 14:28
  • What are "all IE versions"? Font-Face is available since Version 6 and examples of how to use them are in the fontsquirrel-css files. – Merec Mar 11 '13 at 14:26
  • Sorry, I mean 6 to 10. I test the fontsquirrel-css file in ie10. It does not work correctly. – wailynnoo Mar 11 '13 at 14:32

1 Answers1

1

I believe both of those services provide the code for all browsers that are supported, including IE, automatically.

For example, calling a font from Google font API with the style tag, will actually pull in a CSS file from Google with different font declarations. 

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic" />

Generates the following CSS:

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: local('Karla'), local('Karla-Regular'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/QT0qO2FiFD03cwUe_t62t6CWcynf_cDxXwCLxiixG1c.woff) format('woff');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  src: local('Karla Bold'), local('Karla-Bold'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/3nZS3BKzlvhkwl4yjCQcjHYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  src: local('Karla Italic'), local('Karla-Italic'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/ietJ6bjhwzrJL8NSJOc2mgLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 700;
  src: local('Karla Bold Italic'), local('Karla-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/VZ08RdiotRdV1D0ewK-mxL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}

As you can see, there are different formats for different browsers. WOFF is for IE.

Mikey.

PS - Something I mentioned in the comments below:

Are you working and viewing this in IE locally? If so, it may not work. For it to work in IE, I think you have to be viewing the website on an actual server. Something to do with the 'headers' and origin policy in IE - it's a security thing. Could that be it?

Michael Giovanni Pumo
  • 14,338
  • 18
  • 91
  • 140
  • I does not check with other version now. But it does not work in ie10. – wailynnoo Mar 11 '13 at 14:48
  • Are you working and viewing this in IE locally? If so, it may not work. For it to work in IE, I think you have to be viewing the website on an actual server. Something to do with the 'headers' and origin policy in IE - it's a security thing. Could that be it? – Michael Giovanni Pumo Mar 11 '13 at 14:58
  • Thanks! I will check it with actual server. – wailynnoo Mar 11 '13 at 17:13