CODEWITHSUNDEEP
htmlcssinternet-explorerfontsfont-family
Thyago Quintas
Thyago Quintas

Reputation: 669

import font internet explorer

I would like to import some fonts for using in my website, I'm using this code that Google made.

HTML

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Cuprum:400,700' rel='stylesheet' type='text/css'>

CSS

font-family: "Droid Sans", sans-serif;

It's works in Firefox and Google Chrome but IE8 no, why ?

EDITED: Adobe create something like Google and the script is better than google and work perfect in Internet Explorer (more in http://html.adobe.com/edge/webfonts/)

Upvotes: 3

Views: 5348

Answers (5)

Robin
Robin

Reputation: 1

Just add sans-serif as your font.

Like this:

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

Sans-Serif makes it work on every browser

Upvotes: -1

onionjohnny
onionjohnny

Reputation: 1

I had problems with IE8 when using the @import code Google Fonts supplied. On following a suggestion from Google Fonts troubleshooter I pasted the URL quoted in the @import statement into IE to see if I got an error that would help me trace the problem. What it did was download some @font-face code that I then put in the CSS file in place of the @import line and all now works fine in IE8 and Chrome. I have tested on an iPad (safari) and it is also happy with this.

This may work for some but no guarantees! Hope this helps others but I've had this problem for a while and it was a real pain. This seems to have fixed it...for the meantime!

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201798

There is something wrong with the font files generated by the Google service, at least from the IE perspective. IE 9, too, fails to show Droid Sans as served by Google, and I checked in inspection mode (F12) that Google sends both a EOT file and a WOFF file to IE.

The problem relates to some fonts only an may be intermittent; cf. e.g. to the question How to make Google Fonts work in IE?

Thus, GionaF’s suggestion of using FontSquirrel to generate the files and host them locally appears to be the way to go,

Upvotes: 1

Giona
Giona

Reputation: 21114

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.

Upvotes: 6

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15219

The CSS that Google returns for IE includes an @font-face woff font, which is only supported in IE9 and higher.

Upvotes: 0

Related Questions