Search code examples
cssinternet-explorerfontswebfontsgoogle-font-api

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


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?


Solution

  • 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');
    }