IOS 4.2+ webfont (ttf) bold to enlarge font

Question

This is enough: specify the ttf font rendering font-weight:bold incorrectly on mobile Safari for iOS, open the demo site from iphone / ipad with iOS 4.2 / 4.3 Beta 3 or higher:

(this is Reenie + Beanie from Google Fonts)

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

Screen capture

You see a bold font that looks like double rendered . This is unlikely for small to medium font size, but quite significant for large font size / enlargement in

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

Update: This one is not fixed in iOS5.

The best solution I know for a problem would be

• Use font-weight:normal (as shown in the demo)
• Use -webkit-text-strok e or text-shadow to make it look “bold” (plus iPad only css - body prefix added by js, not just a media request).

Answer 1

Had the same problem with h1 inheriting font-weight: bold; from the parent class. Just rewrite the inherited style with font-weight: normal;

Answer 2

Mobile Safari seems to have a buggy way of rendering faux styles with face fonts . For the bold, it doubles the text and the offset, and with most fonts it will go unnoticed, but with thin fonts it will look like a double vision.

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

Please note that using faux styles does not usually work in some browsers , not just Mobile Safari.

Solution 1. Use the appropriate font-weight

Thus, the best solution is to change the font weight to the one provided by Google Fonts, a quick fix below:

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

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

Another solution is to choose a font from the web font archive, which makes a bold style. Alternatives to Google Fonts that are very similar to Renee Beanie and are "bolder" will be, for example, Gochi Hand , Sunshiney or Permanent marker .

Solution 3. Counterfeiting using other means

If you really insist on the need for an artificial bold style, you can try using subtle text-shadow or text stroke .

Answer 3

Do not use the bold or bold tag. they are not needed if you use a specific weighted website.

I had the same problem. He left when I deleted the mention of the font.

Answer 4

Try applying this css rule:

 -webkit-font-smoothing: antialiased;