[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 chargée
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. ^^
Certes, mais une graisse émulée sur une typo un peu plus étrange, j’ai peur du résultat même sur Firefox 🙂
Après vérification, ce n’est pas vraiment propre même sur une typo simple sur Firefox 🙂
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 🙂
Tu as peut-être installé cette font, qui sait :’)
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 😉