@font-face – doing it right

Tous les graphistes avec lesquels j’ai travaillé sur des sites web durant ces dernières années ont insisté pour utiliser des polices de caractères spécifiques. Des polices autres que Arial, Helvetica, Verdana, Times New Roman etc. qui sont les polices installées par défaut sur les ordinateurs des personnes qui accèdent à une page web (voir aussi : safe list du typetester et la page Wikipedia Core Fonts For The Web).
(Souvent d’ailleurs, c’est parce qu’on peut utiliser des polices de caractère spécifiques que certains graphistes préfèrent faire des sites avec  Macromedia Adobe Flash…)

Utilisation de polices standard en CSS

La spécification CSS1 permettait déjà de désigner une police de caractère à utiliser, sa taille, la graisse, le style. De plus, il est conseillé d’utiliser un fallback. En CSS, cela ressemble à quelque chose comme ça :

body {
    font-family: Arial, sans-serif;
    font-size: 1em;
}

A l’ancienne

Jusqu’à il n’y a pas si longtemps, vouloir utiliser des polices de caractère spécifiques impliquait de désigner des zones importantes, comme des menus ou des titres (pour ne pas alourdir trop les pages), et d’y implémenter des images statiques que le ou la graphiste devait préparer auparavant à l’aide d’un logiciel de traitement d’image. (Ces images devaient avoir la bonne taille, de préférence un fond transparent (PNG24) – ce qui posait problème à son tour dans le navigateur alors le plus répandu : IE6..)
Cette méthode devient assez vite pénible, par exemple, quand on a plus que 3 langues différentes – et donc autant d’images différentes – à gérer. Ou encore dès lors qu’on veut modifier un mot…
Continue reading