Search code examples
ioscssfont-face

Inconsistent display of font-face on devices when applying font-weight

I have this issue with a font display on iDevices. When the font-weight is set to bold, the display is much wider and different. What could be the reason?

expected (from desktop pc):

expected

device (iphone 4S or iPad):

device

this is how I declare the font:

@font-face {
    font-family: 'ITCAvantGardeGothicBook';
    src: url('/assets/font/avantgarde-book-webfont.eot');
    src: url('/assets/font/avantgarde-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/font/avantgarde-book-webfont.woff') format('woff'),
         url('/assets/font/avantgarde-book-webfont.ttf') format('truetype'),
         url('/assets/font/avantgarde-book-webfont.svg#ITCAvantGardeGothicBook') format('svg');
    font-weight: normal;
    font-style: normal;
}
Solution

  • Your desktop PC may have the ITCAvantGardeGothicBook bold font installed locally as a separate ttf file - so it renders bold as expected. However your webpage only provides a single reference to a font-face at the normal font-weight... so the browser must mock up a faux bold when viewed on the iPhone. The faux bold will never look as good as a true bold font.

    If you want your bold font to look perfect, include a separate bold font-face with a link to an actual bold font.

    Read this post for more information on why this is important: http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles