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.

Answer 2

It seems to me that it's an unlucky combination of an ultra thin typeface with the way Mobile Safari scales the website to fit in the screen. Normally fonts have hinting that allow your computer to interpret how to paint pixels if it gets to subpixel levels, but this is overridden by Mobile Safari's scaling, and thus paints half pixels as semitransparent.

You could prevent mobile safari from downscaling your website by adding the following meta tag:

<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0">

If you want the font to appear smaller in mobile safari, the solution would be to keep the previous declaration and declare the font size a media query:

@media only screen and (max-device-width: 480px) {
  font-size: 15px;
}

If all else fails, I'd add a 0px text shadow:

.selector {
   text-shadow: 0 0 0 white;
}

Answer 3

Maybe it's -webkit-text-size-adjust 's fault. Try

-webkit-text-size-adjust : none

Answer 4

You could try adding this to your CSS for the element in question:

-webkit-font-smoothing: subpixel-antialiased;

Similarly, you may have transforms effecting the antialiasing. You could also try:

-webkit-transform: translate3d(0,0,0);

And even...

-webkit-backface-visibility: hidden;

Crazy, I know.

Answer 5

Are you using Ultra-Light 100? If you set it to 100 but the file is another weight Mobile Safari could be trying to simulate the thinner variant.

Either way, try -webkit-font-smoothing: antialiased;, if that doesn't work you're out of luck, try the 300.