solarized

# March 23, 2013 at 7:32 am

I’ve been using the Google web font “Shadows Into Light” in a site I’m building only to realise that it’s not rendering very well on iOS. Seems to be some kind of issue in WebKit iOS when the font is sized. If you load this [Codepen](http://codepen.io/jcskyrock/pen/xBCwI) into Safari on a iPad or iPhone you should see what I mean. When used in headings, the font is doubled-up and takes on a racetrack or shadowed appearance. Looks really bad in H3, which is unfortunately where I want to use it in my design. Anyone know any semantic workarounds for this?


chrisburton

# March 23, 2013 at 9:59 am

Try adjusting the font size slightly up or down.

solarized

# March 24, 2013 at 8:37 am

That doesn’t seem to work. The dev site is at http://www.solarized.org. The heading in question is the H2 in the carousel.

chrisburton

# March 24, 2013 at 8:43 am

@solarized The text doesn’t even show up on my iPhone but try adding this:

h2 {
-webkit-font-smoothing: antialiased;
}

solarized

# March 24, 2013 at 8:50 am

Oops, we hide it on iPhone as it was too busy. So, it’s really just iPad I’m trying to get work in this example.

solarized

# March 24, 2013 at 8:55 am

Here is a pic of it’s looking on my iPad mini with your suggestion.


chrisburton

# March 24, 2013 at 9:14 am

@solarized Ok let’s try one last thing and if that doesn’t work, I’d suggest using the updated version of this typeface.

h2 {
font-weight: normal;
}

solarized

# March 24, 2013 at 10:09 am

Great suggestions. Played around with Shadows Into Light Two, but it suffers from the same issue. font-weight: normal fixes the issue for both fonts. Will use that now. Thanks!

chrisburton

# March 24, 2013 at 10:41 am

Glad I could help you solve it.

solarized

# March 24, 2013 at 11:14 am

Thanks again.