Une astuce rapide, mais qu’il faut connaître : vérifiez bien que vous chargez toutes les graisses de font utilisées dans une font chargée via font-face.

Je tombe de plus en plus récemment sur des blogs où, en plein milieu du contenu, le texte apparaît flou, et avec un interlettrage étrange. Après inspection, le constat est souvent le même : le texte est déclaré comme bold, mais dans une font où la graisse bold n’est pas chargée. Le navigateur se charge alors d’émuler, souvent sans succès, le rendu de cette font, causant l’affichage étrange. Ce problème est aussi présent pour le texte en italique, causant un souci avec les éléments ayant un font-style: italic;.

La solution est simple, n’oubliez pas de charger les graisses (au moins bold/700), ainsi que la version en italique si la font que vous implémentez s’applique à des paragraphes de texte.

Pour illustrer, voici un exemple provenant de cet article sur les dark patterns des méthodes de résiliation.

Graisse non chargée

graisse-non-chargee

Graisse chargée

graisse-chargee

 

Tags : , ,