Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Web font rendering on iOS inside certain HTML elements

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #43605
    solarized
    Member

    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?

    ![Google font bug on iOS](http://oi46.tinypic.com/11t97qb.jpg “Google font bug on iOS”)

    #129440
    chrisburton
    Participant

    Try adjusting the font size slightly up or down.

    #129511
    solarized
    Member

    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.

    #129512
    chrisburton
    Participant

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

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

    #129513
    solarized
    Member

    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.

    #129516
    solarized
    Member

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

    ![](http://i46.tinypic.com/2na8op1.jpg “”)

    #129517
    chrisburton
    Participant

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

    #129520
    solarized
    Member

    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!

    #129522
    chrisburton
    Participant

    Glad I could help you solve it.

    #129524
    solarized
    Member

    Thanks again.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.