Search code examples
csssafarimobile-safariwebfontsgoogle-webfonts

Google webfont Lato 100 and mobile Safari

I am using Google's web font api with the font "Lato", font-weight of 100.

On the desktop browsers I have tested everything displays fine. However if I view the web page with iPad or iPhone (both iOS5) I notice that the font is extremely thin and the only thing that seems to be displayed correctly are the dots.

I tried implementing the font using the Javascript, LINK-Tag and CSS @import methods, all produce the same results.

I saw that in the FAQs they state: The Google Web Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.

Which means it should work, right? Is there anyway to solve this?

Thanks

Solution

  • Something I have seen to help really thin Fonts (Incidently also Lato) is this:

    -webkit-text-stroke-width: 0.1px;

    Anyway it's only a case by case basis, I would use a class / media query to make sure to only apply it when needed (safari(with a class set by js) on a scale under 1.0 or something). Try higher float values if needed.