Using @Import for Google Fonts Is Not Working on Internet Explorer

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

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

How to make Google Fonts work in IE?

The method, as indicated by their technical considerations page, is correct - so you're definitely not doing anything wrong. However, this bug report on Google Code indicate that there is a problem with the fonts Google produced for this, specifically the IE version. This only seems to affect only some fonts, but it's a real bummmer.

The answers on the thread indicate that the problem lies with the files Google's serving up, so there's nothing you can do about it. The author suggest getting the fonts from alternative locations, like FontSquirrel, and serving it locally instead, in which case you might also be interested in sites like the League of Movable Type.

N.B. As of Oct 2010 the issue is reported as fixed and closed on the Google Code bug report.

How to make this Google Font work on Internet Explorer 11

Use:

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

To call it inside your stylesheet and:

font-family: 'Montserrat', sans-serif;

To make something that font..

From google fonts: "Note: For best display in IE, make the stylesheet tag the first element in the HTML section. In IE, if the link is placed after tags, the entire page will block and not display anything until the font is loaded."

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

If that does not work, try this: https://developers.google.com/fonts/docs/webfont_loader#Example

This will make every browser "behave like Firefox".

import font internet explorer

Because it's provided in WOFF format only, which is not supported by IE8.

Here: http://www.fontsquirrel.com/fontfacedemo/Droid-Sans you can download the same font in all formats needed.

Then, add the following code to your main CSS:

@font-face {
font-family: "Droid Sans";
src: url('DroidSans-webfont.eot');
src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('DroidSans-webfont.woff') format('woff'),
url('DroidSans-webfont.ttf') format('truetype'),
url('DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}

So you'll be able to continue using this font.

Note that the font's files must be in the same folder of your stylesheet.

@font-face not working with specific version of Internet Explorer 11

This could be related to an issue with the Security Settings as described in this bug report.

In Internet Options go to:

  • The Security Tab
  • Security level for this zone
  • Custom level
  • Downloads
  • Font Download

If it's Disabled then you need to Enable it.

Screenshot of the Internet Options window. The Security tab is selected and the "Custom level..." button has a red box around it.

Screenshot of the Security Settings window. Font download's "Enable" option has a red box around it.



Related Topics



Leave a reply



Submit