Le web avance et cet article date de novembre 2010, son contenu peut ne plus être pertinent ou d'actualité.

Import de polices en CSS 3

Un article plus récent aborde ce sujet : Import de police en CSS (màj)

S’il y a bien un domaine dans lequel on est limité lors de la création de site web, c’est le choix des polices : Arial, Helvetica, Verdana, sont les principales utilisées et nombre de webmaster utilisent des images afin d’avoir titres ou menus avec des polices plus “exotiques”.

Il existait jusqu’alors une solution offerte par Google : Google Font API, qui permet d’insérer de nouvelles polices dans ses sites, cependant, le nombre de police est assez limité.

Mais désormais avec les navigateurs supportant le CSS 3, les navigateurs récents donc, il est possible d’importer n’importe quelle police. En effet via le mot-clef @font-face, il suffit d’importer la police en CSS et de lui définir son nom :

@font-face {
     font-family: Eurostile;
     src: url('./fonts/eurostile.ttf');
}

Il suffira par la suite d’indiquer dans les attributs CSS le nom de la police importée afin de l’utiliser sur les blocs voulus.

Cependant, il faut garder à l’esprit que l’utilisateur téléchargera au préalable la police sur son ordinateur, si bien qu’il faut privilégier les polices légères afin que celui-ci ne voit pas la police changer au cours du chargement de la-dite page.

Espérons aussi que personne n’abuse de cette fonctionnalité au risque de voir des sites internet défigurés par des polices trop exotiques et/ou illisibles.

Maj : Google Font est dorénavant moins limité en nombre de polices disponibles.

Publié le par Edouard dans Typographie