@font-face : des polices pour vos textes de labeur en CSS

Tweet

Marre des polices système sur vos sites web ? Vous avez essayé divers outils un peu dans tous les sens ? Solutions flash ? Solutions images ? Solution tant pis ?… @font-face peut être votre ami.

Pour faire écho au chouette article d’Emeline sur l’API Google Font, voilà un petit topo sur votre « nouveau » copain.

Pour commencer (vous allez rire) @font-face n’a absolument rien de nouveau, et n’est évidemment pas une solution sans contrainte (ça se saurait…). Contre toute attente, @font-face n’est en fait qu’une fonctionnalité CSS2 (et non pas CSS3), mise en place depuis la version 5.5 d’internet explorer !!!  Ça vous épate, hein ?  Moi je ne m’en remets pas…

En résumé, il s’agit d’appeler une police de votre choix en tête de votre CSS, comme suit :

@font-face { font-family: Nomdemapolice; src: url('Nomdufichiercorrespondant.eot'); font-weight:normal; }

et de l’appliquer ensuite à une balise ou une classe, tout simplement :

h3 { font-family: Nomdemapolice, sans-serif; }

C’est si merveilleux, dit comme ça, non ?
Calmez donc vos ardeurs, fougueux graphistes! Il existe un côté obscur.
Les moins bigleux d’entre vous auront certainement remarqué l’extension Ô combien flippante de la police, dans l’exemple : « .eot ». Ce système, initialement, ne devait fonctionner qu’avec des polices au format propriétaire « Embedded Open Type » (.eot). Encore un vieux coup d’IE, ça…
Qu’à cela ne tienne! Les navigateurs récents fonctionnent désormais impeccablement avec des polices au format TruType (.ttf) ou OpenType (.otf). Ce qui facilite grandement la tâche, et vous offre nettement plus de choix. Je vous laisserai le soin de gérer vous-même tout litige lié à un éventuel problème de droits avec les polices utilisées. Vous êtes bien assez grands.

Autre point contraignant ; pour utiliser votre police en gras, italique ou autre, il vous faudra déclarer plusieurs lignes @font-face. Exemple bête et méchant. Vous déclarez votre police dans 3 formes différentes :

@font-face { font-family: Nomdemapolice; src: url('Fichierdemapolice-Regular.ttf'); font-weight:normal; }

@font-face { font-family: Nomdemapolice; src: url('Fichierdemapolice-Bold.ttf'); font-weight:bold; }

@font-face { font-family: Nomdemapolice; src: url('Fichierdemapolice-Italic.ttf'); font-style:italic; }

Hop, donc. En l’appelant ensuite dans votre CSS, selon vos définitions de styles, le navigateur utilisera la police correspondante :

h1 {font-style: normal;
 font-weight: bold;
}
h2 {font-style: normal;
 font-weight: normal;
}
h3 {font-style: italic;
 font-weight: normal;
}

Dans cet exemple seront utilisées :

• la police « Fichierdemapolice-Bold.ttf » pour h1,
• la police « Fichierdemapolice-Regular.ttf » pour h2,
• et la police « Fichierdemapolice-Italic.ttf » pour h3.

Pour en revenir à mon parallèle avec l’API Google font, vous constaterez rapidement, en fouinant un peu, qu’il repose sur @font-face. Comme quoi, si Google s’en sert, c’est pas comme si c’était moisi…

Et foilaaa !
Si la technique vous intéresse, hormis les quelques liens en bas de l’article, je vous recommande chaudement le site www.fontsquirrel.com qui propose un outil de conversion de police, @font-face generator. Celui-ci vous permettra d’uploader vos polices (pourquoi pas faites-maison ?), et d’y récupérer en 2 clics un package bien utile ! Il contient en effet votre police convertie en divers formats (.eot,.svg,.ttf,.woff), ainsi qu’un exemple d’utilisation de la technique @font-face (html+css). L’intérêt d’avoir plusieurs formats est de contourner les divers problèmes de compatibilités entre les divers navigateurs, grâce à de subtils hack css. Je décide au passage de faire l’impasse sur ces problèmes de compatibilité, comme il existe des solutions miracle telles que celle-ci.
Bref, pour le coup, fontsquirrel est un allié de poids. En plus, y’a un écureuil. Imparable, donc.

A vous de veiller maintenant à utiliser cette technique avec parcimonie, car au-delà du désastre graphique qu’il vous permet de créer, à chaque ligne @font-face déclarée correspond un chargement de police ! Attention donc au poids cumulé.

Tags : CSS - Typographie - Webdesign

Tweet

A propos de l'auteur