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

Question

I am trying to use google fonts on my web but I have an issue with internet explorer. I am 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