[CSS] font-face : Attention aux font-weight !

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

 

Partager cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  • Tu serais pas sur Chrome quand tu as ce problème ? J’ai souvent constaté des problèmes avec cette bouse… heu ce navigateur, avec les web fontes. ^^

  • Marrant, je n’ai jamais vraiment constaté de problème avec ça. Même si je charge la font bold quand elle est dispo, mais pas vu de soucis flagrant sur de l’émulation de bold par le navigateur 🙂

  • Il me semble avoir vu même des éléments encore plus bizarre sous chrome sur PC. Des lettres coupées etc.

    En tout cas c’est toujours bon de rappeler ce genre de petit truc 😉