Proper Web Font Rendering in iOS

Posted on

Ocassionaly iOS will throw tempertantrums with your custom @font-face fonts on your mobile site and decide that it would be a dandy idea to double-render them. This seems to have been going on since iOS4 and appears to be without any rhyme or reason, but luckily there is a fix. Instread of setting font-weight to bold, load the bold font face seperately with a different name as shown here then set font smoothing to be anti-aliased in your CSS, and Viola! It takes up a bit more space for the extra font face but your site is now magically more bearable on iOS devices!

/* Original Font */
@font-face {
    font-family: MyFont;
    src: url(...);

/* Bold Font Face of Same Font */
@font-face {
    font-family: MyFontBold;
    src: url(...);
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

/* Example Using on an element */
    font-face: MyFontBold;
    -webkit-font-smoothing: antialiased;

Leave a Reply

Your email address will not be published.