Google webfont Lato 100 and mobile Safari

Question

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

Answer 1

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.