CSS font-face : gare aux font-weight !

Chers internautes, nous vous proposons une petite astuce rapide. Bien que certains sauront de quoi il s’agit, d’autres trouveront leur bonheur dans ce petit texte.
Ce que nous allons parler ici concerne les graisses de « font » qui sont utilisées dans une « font » chargée via CSS font-face.

Depuis quelque temps, nous tombons fréquemment sur des sites ou blogs où en plein milieu d’un contenu, quelques lignes de texte apparaissent comme floues avec un inter lettrage assez étrange.
La constatation après une petite inspection est que le texte est déclaré comme « bold », mais avec une « font » où la graisse « bold » n’est pas chargée.
À cause de cela, le navigateur sera contraint d’émuler le rendu de cette « font » ce qui n’aboutira pas et occasionnera un affichage étrange. Ce problème est également rencontré pour le cas de textes en italique occasionnant un souci avec les éléments qui possèdent un « font-style: italic; ».

La solution que nous proposons ou plutôt l’astuce est simple, il faut pas oublier de charger les graisses au minimum bold/700 ainsi que la version en italique du « font ».

Voici une petite illustration

Graisse non chargée

graisse-non-chargee

Graisse chargée

graisse chargée

Répondre