Using @import for Google Fonts Doesn't Work in Internet Explorer

Question

Hi guys, I'm trying to use Google fonts on my webpage, but I have a problem with Internet Explorer. I use @import, and when I google, I see that people use it as follows:

@import url('http://fonts.googleapis.com/css?family=Open+Sans'); 

the fact is that the link I received is as follows:

 @import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css); 

when I open my network in IE, the text is missing.

Do I need to get webfont files? or is there a way to fix this?

Answer 1

HIA I had the same problem, so I created a new web version of this font that works fine with IE. You can download it here: http://assafk.com/staff/open_sans_hebrew/Opes_Sans_Hebrew_Fixed.rar Thank you! Assaf

after uploading the files to rar, add this css to use it:

 @font-face { font-family: 'Open Sans Hebrew'; font-style: italic; font-weight: 300; src: url(opensanshebrew-lightitalic-webfont.eot); src: url(opensanshebrew-lightitalic-webfont.eot?#iefix) format('embedded-opentype'), url(opensanshebrew-lightitalic-webfont.woff) format('woff'), url(opensanshebrew-lightitalic-webfont.ttf) format('truetype'); } @font-face { font-family: 'Open Sans Hebrew'; font-style: normal; font-weight: 300; src: url(opensanshebrew-light-webfont.eot); src: url(opensanshebrew-light-webfont.eot?#iefix) format('embedded-opentype'), url(opensanshebrew-light-webfont.woff) format('woff'), url(opensanshebrew-light-webfont.ttf) format('truetype'); } @font-face { font-family: 'Open Sans Hebrew'; font-style: italic; font-weight: 400; src: url(opensanshebrew-italic-webfont.eot); src: url(opensanshebrew-italic-webfont.eot?#iefix) format('embedded-opentype'), url(opensanshebrew-italic-webfont.woff) format('woff'), url(opensanshebrew-italic-webfont.ttf) format('truetype'); } @font-face { font-family: 'Open Sans Hebrew'; font-style: normal; font-weight: 400; src: url(opensanshebrew-regular-webfont.eot); src: url(opensanshebrew-regular-webfont.eot?#iefix) format('embedded-opentype'), url(opensanshebrew-regular-webfont.woff) format('woff'), url(opensanshebrew-regular-webfont.ttf) format('truetype'); } @font-face { font-family: 'Open Sans Hebrew'; font-style: italic; font-weight: 700; src: url(opensanshebrew-bolditalic-webfont.eot); src: url(opensanshebrew-bolditalic-webfont.eot?#iefix) format('embedded-opentype'), url(opensanshebrew-bolditalic-webfont.woff) format('woff'), url(opensanshebrew-bolditalic-webfont.ttf) format('truetype'); } @font-face { font-family: 'Open Sans Hebrew'; font-style: normal; font-weight: 700; src: url(opensanshebrew-bold-webfont.eot); src: url(opensanshebrew-bold-webfont.eot?#iefix) format('embedded-opentype'), url(opensanshebrew-bold-webfont.woff) format('woff'), url(opensanshebrew-bold-webfont.ttf) format('truetype'); } @font-face { font-family: 'Open Sans Hebrew'; font-style: italic; font-weight: 800; src: url(opensanshebrew-extrabold-webfont.eot); src: url(opensanshebrew-extrabold-webfont.eot?#iefix) format('embedded-opentype'), url(opensanshebrew-extrabold-webfont.woff) format('woff'), url(opensanshebrew-extrabold-webfont.ttf) format('truetype'); } @font-face { font-family: 'Open Sans Hebrew'; font-style: normal; font-weight: 800; src: url(opensanshebrew-extrabold-webfont.eot); src: url(opensanshebrew-extrabold-webfont.eot?#iefix) format('embedded-opentype'), url(opensanshebrew-extrabold-webfont.woff) format('woff'), url(opensanshebrew-extrabold-webfont.ttf) format('truetype'); } 

Answer 2

Sheriffderek is right in the comments on one of these answers - you should not use @import but you did not explain it. You probably have a cross-domain problem, and IE and Firefox block remote requests made this way. You need to associate the content type with the remote request so that it is not blocked.

 <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 

Here the 'type' parameter is the key - this is what allows remote request in IE and FF. CSS is allowed to perform such cross-linking, as W3C gods are rated as low security risk.

Check out these links for more information on CORS:

• IE Description: http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx
• Mozilla Comments: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
• JS implementation side (if you're really interested): http://www.html5rocks.com/en/tutorials/cors/

Answer 3

Why don't you use:

<link href='link-to-your-css/file.css' rel='stylesheet' type='text/css'>

Do not use @import

Answer 4

This is a problem with the Open Sans Hebrew font itself, a problem that has been reported several times in the Google Fonts Early Access Discussions forum , without a solution published so far. Consider using some other Early Access font (that is, experimental), such as Aleph Hebrew.