Utilisation de polices non-standards pour votre site web

Georgia, Lucida, Arial, Tahoma ou Verdana : il n'existe qu'une poignée de polices présentes sur n'importe quel ordinateur appelées "web safe fonts" (c.f. la liste des polices standards). Donc, si vous essayez d'afficher une police non standard sur votre site ou page web, elle ne s'affichera pas et à la place apparaîtra la police par défaut, en général : Times New Roman.

Cependant, il existe plusieurs façons d'afficher des polices non-standards sur n'importe quel ordinateur. Dans cet article, je ne m’intéresserai qu'à 4 de ces méthodes : Typeface, Typekit, Google Web Fonts et enfin la propriété CSS @font-face.

Typekit et Typeface sont des outils JavaScript que vous installez sur votre site web qui vous permettent d'utiliser n'importe quelle police. Cependant, le premier est payant et dès que vous arrêtez de payer pour ce service, tous les sites auxquels vous avez ajouter ce script apparaîtront dans des polices standards. Le deuxième est un peu gourmand en ressources, c'est pour cela qu'il ne faut l'utiliser uniquement pour des titres ou des éléments de menus de navigation. De plus, l'implémentation du pseudo-sélecteur CSS :hover ne fonctionne pas.

Google propose une alternative gratuite et open source à Typekit et Typeface appelé Google Web Fonts. L'ajout de la police se fait de trois manières différentes : via une balise meta, via un @import ou via une insertion de javascript. Cette méthode est la plus simple à mettre en place et la plus simple vis à vis des droits d'auteurs puisque l'utilisation de toutes les polices est permise que ce soit dans un cadre ou dans un cadre commercial.

Une autre alternative (ma préférée) est d'utiliser la règle CSS @font-face. Elle permet de télécharger une police originale à partir de votre serveur web. Gardez, par contre, à l'esprit que les questions des droits d'auteur s'appliquent et des problèmes avec la distribution de la police via votre serveur Web peuvent apparaître.
Pour utiliser une police appelée, par exemple, Novacrea, sur tous les paragraphes :

@font-face {
font-family: Novacrea;
src: url('http://votre_domaine.tld/polices/Novacrea.ttf');
url('http://votre_domaine.tld/polices/Novacrea.eot'); /* IE9 */
}
p {font-family: Novacrea, serif}

La règle @font-face fonctionne sous Internet Explorer 9, Firefox, Opera, Chrome, et Safari. Cependant, Internet Explorer 9 accepte seulement les polices de type .eot, pendant que Firefox, Chrome, Safari, and Opera accepte les formats .ttf et .otf.
Si pour une raison ou une autre, le site fournissant la police est indisponible, la police serif par défaut sera utilisée.