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

Millinery

can you post a screenshot? 100 seems really thin, could be something with the resolutions. Do you have to use the actual font? if it´s just a little text it´s better to use images... – Franko

I hope this works: lh6.googleusercontent.com/-QhOEvtKPXgY/Tz9eQJzuQxI/AAAAAAAAAAc/… – Millinery

it is better to have a jsfiddle page to demo what is happening.... – Appetizing

this question is for every handwritten (bold, italyc) font in Safari. – Shedd

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.

Imbecilic

This is the answer for every 'thin font' problem (not well rendered) with Safari!. Can't believe this is the only answer with this in StackOverflow ! – Shedd

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;
}

Alicyclic

Answer 3

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

-webkit-text-size-adjust : none

Disseminate

No - sorry doesn't solve it. I have also noticed that the error also appears to be with some windows browsers (i.e. older versions of IE) – Millinery

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.

Cinnamon

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.

Gregggreggory