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

Answer 1

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.

Answer 2

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.

Answer 3

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;

Answer 4

Try applying this css rule:

-webkit-font-smoothing: antialiased;