Using @import for google fonts is not working on internet explorer

Question

Hey guys i'm trying to use google fonts on my web but i have an issue with internet explorer. I'm using @import, and when i google it i see that people use it this way:

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

the thing is that the link i got looks like this:

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

when i open my web on IE there is no text at all.

do i have to get the webfont files? or is there a way to fix this?

Answer 1

Hia I've had the same issue, so I've created a new web version of this font which works great with IE. You can download it Here: http://assafk.com/staff/open_sans_hebrew/Opes_Sans_Hebrew_Fixed.rar Thanks! Assaf

after you download the files in the 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 shouldn't be using @import - but didn't explain him/herself. You likely have a cross domain issue and both IE and Firefox blocking remote requests made like this. You have to associate the content type with your remote request so that it isn't blocked.

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

The 'type' parameter here is key - it is what allows the remote request to happen in IE and FF. CSS is allowed to do this kind of cross domain linking, as it is judged by the W3C gods to be a low security risk.

Check these links out for more information on CORS:

• IE's explanation: http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx
• Mozilla's thoughts: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
• The JS side of implementation (if you are really curious): 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'>

Don't use @import

Answer 4

This is a problem with the Open Sans Hebrew font itself, a problem that has been reported several times on the Google Fonts Early Access Discussions forum, with no solution posted so far. Consider using some other “Early Access” (i.e., experimentanl) font, such as Alef Hebrew.