_g5n5w
Last Updated: February 25, 2016
·
959
· zaneswafford

Proper Web Font Rendering in iOS

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 */
#myBoldElement{
    font-face: MyFontBold;
    font-weight:normal;
    -webkit-font-smoothing: antialiased;
}