How to correct for font rendering issues in mobile Safari?

Question

I've been having an issue with font rendering in mobile Safari (Safari on my Mac renders fine). I'm using an OpenType font along with the @font-face selector and some of the characters (mainly just 's' and 'c') are appearing a lot more thin than others (very noticeably so - relative to each other one looks 'light' and the others look 'bold'. The weirdest thing about this is that it's only happening in landscape mode. Has anyone seen this before? The only thing that makes this go away is to set -webkit-transform: translate3d(0,0,0); on the body selector which seems completely wrong, but may give a bit of insight into the problem. I came across that on another site: http://openradar.appspot.com/11097956.

Thanks in advance for any help, Brandon

Answer 1

This looks like what you need: Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others? They used this code to fix it:

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {      
        td#main_box { -webkit-text-size-adjust:100% }               
}