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

iphone ipad ios css mobile-safari
vincicat picture vincicat · Feb 21, 2011 · Viewed 20.8k times · Source

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)

Answer

Chris Caldwell picture Chris Caldwell · May 12, 2011

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;

Related questions

position: fixed doesn't work on iPad and iPhone

I have been struggling with fixed positioning in iPad for a while. I know iScroll and it does not always seem to work (even in their demo). I also know that Sencha has a fix for that, but I couldn't …

Read More
Styling input buttons for iPad and iPhone

I'm using CSS to style the input buttons on my website, but on IOS devices the styling is replaced by Mac's default buttons. Is there a way to style buttons for iOS, or a way to maybe make a hyperlink …

Read More
Install .ipa to iPad with or without iTunes

I have the .ipa from PhoneGap build and I need to test it. I got provisioning profile from Developer account. So my question is: can I directly put my .ipa to iPad to install for testing, or do I have …

Read More