0

I got this weird result when using Lato font in Internet Explorer 8 (it looks fine in current Chrome and Firefox). The problem is missing horizontal strokes on letters. Screen below: official fonts

The problem is visible only when using font-size 13px and few other smaller ones (e.g. 11px).

I use official webfonts files from Lato's site (http://www.latofonts.com/) and CSS @font-face syntax (below I include only one declaration for regular font):

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: normal;
  src: url("lato/LatoLatin-Regular.eot");                                    /* IE9 Compat Modes */
  src: url('lato/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url("lato/LatoLatin-Regular.woff")       format("woff"),              /* Modern Browsers */
       url("lato/LatoLatin-Regular.ttf")        format("truetype");          /* Safari, Android, iOS */
}

Suprisingly it works alright in IE8 when linking to Google Fonts version instead by including:

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

The result becomes: Google Fonts

What's the reason of this problem? Is there a way to fix it? Why does Google Fonts render differently than official webfont files? In what ways does Google process the original fonts?

Community
  • 1
  • 1
Robert Kusznier
  • 6,471
  • 9
  • 50
  • 71

1 Answers1

0

I have the same problem, but due to my webpage viewers I found out, that different browsers (like FF) on different computers are showing missing horizontal strokes. The error might be connected with the fact, that the creator of the font just published 2.0 version. Google still has previous one. They are changing it, although latin characters aren't available by another error (see the discussion bellow on http://www.latofonts.com/lato-free-fonts/ ).

Paweł Leszczyński
  • 1