3

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/)

Thyago Quintas
  • 669
  • 2
  • 7
  • 12

5 Answers5

6

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.

Giona
  • 20,734
  • 4
  • 56
  • 68
1

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,

Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

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

Roddy of the Frozen Peas
  • 14,380
  • 9
  • 49
  • 99
0

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!

onionjohnny
  • 1
-1

Just add sans-serif as your font.

Like this:

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

Sans-Serif makes it work on every browser

ADyson
  • 57,178
  • 14
  • 51
  • 63
Robin
  • 1