Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Font (with a space on it) not rendering on IE7/IE8

Does anybody has an idea why would IE7/IE8 won't render a Google Font if the name has a space on it?

You can see a demo here: http://jsfiddle.net/fYzAb/1/

The exact same two tags, one using "Oswald" the other one using "Francois One" (with fallback to Georgia to make it easier to spot).

You can see a screenshot here http://screencast.com/t/dhhccz5n7O (IE) and here's how it should render: http://screencast.com/t/9M9uhTYTw5n (Chrome)

Any help would be greatly appreciated!

BTW: Here's a similar problem, http://www.htmlcodetutorial.com/comments/viewtopic.php?f=2&t=20841

PD: I know I can call both fonts in the same tag.

like image 334
leopic Avatar asked Feb 23 '23 05:02

leopic


2 Answers

I guess you have also found this one: http://code.google.com/p/googlefontdirectory/issues/detail?id=1
(there was a post today regarding to Francois One, I guess it was yours)

There is a solution that works for me(I see the font now in IE6-9)

The most common reason fonts don't load in IE is because the font name table was coded wrong by the font author. That is definitely the case with Josefin. The Family Name + the Style Name must = The Full Name. Josephine fails this. FYI - fontsquirrel.com automatically corrects these problems in their webfonts.

This must be the reason, some wrong naming inside the original font which matters to IE

  1. Downloaded the TTF from google
  2. Uploaded the font at fontsquirrel.com and got my "@font-face-kit"
  3. Uploaded the created .eot inside the Kit
  4. Edited the css regarding to this bulletproof syntax

I changed only the URLs of the EOTs to my uploaded font, for the WOFF I still may use the google-font(But i guess it's better to use own files for every font, nobody knows how long the specific fonts will be reachable via the current URLs).

Also Note: the font-family-name to use inside the CSS has changed now to FrancoisOneRegular

http://jsfiddle.net/doktormolle/nLUgJ/

like image 111
Dr.Molle Avatar answered Feb 26 '23 08:02

Dr.Molle


Try replace + sign to %20. I checked url with %20 and it works too, maybe it'll work for IE.

https://fonts.googleapis.com/css?family=Francois%20One
like image 26
morsik Avatar answered Feb 26 '23 09:02

morsik