CSS Google Fonts - Italics getting stretched in IE

Question

I have a question about Google Fonts. I am using the font "Lato" from Google Fonts and it appears to be working perfect in Firefox, Chrome, IE9 but in IE 7 and 8 the italic version looks real stretched.

I'm not doing anything too crazy just using

font-style:italic; font-weight:700;

and including the font using:

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

Is this a known problem with Google Fonts or is it something I am doing wrong?

Thanks!

Answer 1

It's an old question, but i was googling for an hour to find an easy workaround for this faux bolds and faux italics in IE8. here's what worked for me: Instead of loading all fonts at once I load them one by one. I prefer the @import method in the css file so it goes like this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);

Answer 2

For whatever reason (maybe someone can help with the why), Google has decided not to serve any font variants other than the regular one to IE users. This behaviour appears to be controlled by user-agent - if you load the CSS url (in your case http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic) in Firefox vs IE you'll see that only one @font-face block is returned to IE.

So, the easiest way to get around it is to load that url in Firefox and copy/paste the CSS into your own css file, rather than serving directly from Google. Now IE will have access to all the font variants as well... but technically you're breaking the link between the CSS file and underlying font files, which should never change but that's entirely up to Google's discretion.

The unfortunate thing is (probably part of their reasoning), IE doesn't render the font particularly well even then. In my testing, semibold weight shows up bolder than it should and italics seem spaced a little too far apart. It still looks more pleasant than the faux-italic oblique font IE renders without the extra variants, at least.

edit: After some more research, I've found a great page on Typekit which documents the issue exhaustively. Basically, IE is extremely limited when it comes to custom font families - the only way you're going to be able to achieve success with IE is to define your variants as separate font families in IE, and then make use of those different fonts where you would use font-weight and font-style in other browsers. This should give you universal compatibility.

edit2: It turns out the urls for IE fonts are different to those for other browsers (IE uses eot format instead of woff). An exhaustive process for how to get this working for your font would be as follows:

• Open http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic in firefox/chrome/etc and copy the css to a new file, or into your ie-only stylesheet.
• Go through and take out all the 'local' and 'format' src definitions, leaving you with just the 'url' parts.
• For each variant specified in your font stylesheet url (in your example, these would be 400, 700, 700italic and 900italic), load the font stylesheet in IE with this variant only and open the resulting CSS in a text editor. For example, load http://fonts.googleapis.com/css?family=Lato:900italic to get the superbold italic variant.
• Find the matching variant in your new stylesheet (the font-style and font-weight properties should match) and replace the woff src url with the eot one for IE. Also give the font a different family - I recommend suffixing with the style and weight like Typekit do, so that Open Sans becomes Open Sans i9 and so on.
• Do this for all remaining variants.
• Conditionally include this new stylesheet in place of the one you are already using for other browsers.
• Wherever you have used font-style or font-weight in your css, add a font-family as well, referencing the new family name AND the correct family name as seen by other browsers. For example: font-family: 'Open Sans i9', 'Open Sans'; font-weight: 900; font-style: italic;. This will use the font family name for IE compatibility, and the base family + variants in other browsers.