Ocasionalmente, o iOS vai lançar turbulências com suas fontes @ font-face personalizadas em seu site móvel e decidir que seria uma ideia elegante renderizá-las duplamente. Isso parece ter acontecido desde iOS4 e parece não ter rima ou motivo, mas felizmente há uma solução. Em vez de definir a espessura da fonte para negrito, carregue a fonte em negrito separadamente com um nome diferente, conforme mostrado aqui, em seguida, defina a suavização da fonte para ter suavização de serrilhado em seu CSS e Viola! Ocupa um pouco mais de espaço para a fonte extra, mas seu site agora é magicamente mais suportável em dispositivos iOS!
/* 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;
}