Web font rendering on iOS inside certain HTML elements

[solarized]

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]

Try adjusting the font size slightly up or down.

[solarized]

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]

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

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

[solarized]

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]

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


[chrisburton]

@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]

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]

Glad I could help you solve it.

[solarized]

Thanks again.

[Author]

Posts