iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

Question

This one is quite specify: specify ttf font rendering font-weight:bold incorrectly on iOS mobile safari, open demo site with iphone/ipad with iOS 4.2/4.3 Beta 3 or above:

(this is Reenie+Beanie from google fonts)

http://jsbin.com/ojeqe3/16/

Screen capture

You see the bold font look double rendered. This is not significant for small and medium font size, but quite significant for large font-size / zoom in

My friend will report this bug to apple. However, anything he can do to solve the bug? (kill the text-adjust is not OK)

Update: This one is not fixed in iOS5.

The best solution I know for the problem will be

1. Use font-weight:normal (as shown in demo)
2. Use either -webkit-text-stroke or text-shadow to make it look "bold" (plus iPad only css - body prefix added by js, not only media query)

Solution 1

Had the same issue with an h1 inheriting the font-weight: bold; from a parent class. Just overwrite the inherited style with a font-weight: normal;

Solution 2

It seems that Mobile Safari has a buggy way of rendering faux styles with font-faces. For bold it will double the text and offset, and with most fonts it would go unnoticed, but with thin font faces it will look like double vision.

In your case the Reenie Beanie does not include a bold style, and if you're using them as heading without changing the font-weight to normal or 400 it will render the bold weight "faux styled".

Please do note that using faux styles is generally buggy in some browsers and not only in Mobile Safari.

Solution 1. Use the appropriate font-weight

So the best solution is to change the font-weight to the one that Google Fonts provide, quick fix below:

h1, h2, h3, h4, h5, strong, b { 
    font-weight: 400; 
} 
/* or font-weight: normal */ 

Solution 2. Use a font that does provide the bold/italic style that you want

The other solution is to pick a font from a web font archive that does include a bold style. Alternatives in Google Fonts that look a lot like Reenie Beanie and are "bolder" would be e.g. Gochi Hand, Sunshiney, or Permanent Marker.

Solution 3. Fake the faux using other means

If you really insist on wanting a faux bold style you can try using a thin text-shadow or text stroke.

Solution 3

don't use the 'bolder' or 'bold' tag. they aren't necessary if you are using a specific weighted webfont.

I had the same problem. It went away when I removed any mention of font-weight.

Solution 4

Try applying this css rule:

-webkit-font-smoothing: antialiased;

View more solutions