La police

Ah… La police… On touche un point sensible.

En effet, il se pose un problème : pour qu'une police s'affiche correctement, il faut que tous les internautes l'aient. Si un internaute n'a pas la même police que vous, son navigateur prendra une police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendiez.

La bonne nouvelle, c'est que depuis CSS 3, il est possible de faire télécharger automatiquement une police au navigateur. Je vous expliquerai dans un second temps comment faire cela. Ici, comme vous avez tous les même PC, le problème ne se posera pas. Sauf si je corrige à la maison, hihi.

Modifier la police utilisée

La propriété CSS qui permet d'indiquer la police à utiliser est font-family. Vous devez écrire le nom de la police comme ceci :

Seulement, pour éviter les problèmes si l'internaute n'a pas la même police que vous, on précise en général plusieurs noms de police, séparés par des virgules :

Le navigateur essaiera d'abord d'utiliser la police1. S'il ne l'a pas, il essaiera la police2. S'il ne l'a pas, il passera à la police3, et ainsi de suite.
En général, on indique en tout dernier serif, ce qui correspond à une police par défaut (qui ne s'applique que si aucune autre police n'a été trouvée).

Il existe aussi une autre police par défaut appelée sans-serif. La différence entre les deux est la présence de petites pattes de liaison en bas des lettres, que la police sans-serif n'a pas. Oui, c'est subtil.

Oui, mais quelles sont les polices les plus courantes qu'on a le « droit » d'utiliser, me direz-vous ?
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :

• Arial ;
• Arial Black ;
• Comic Sans MS ;
• Courier New ;
• Georgia ;
• Impact ;
• Times New Roman ;
• Trebuchet MS ;
• Verdana.

La figure suivante vous montre à quoi ressemblent ces polices.

Différentes polices

Ainsi, si j'écris :

… cela signifie : « Mets la police Impact ou, si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon Verdana, ou si rien n'a marché, mets une police standard (sans-serif) ».

En général, il est bien d'indiquer un choix de trois ou quatre polices (+ serif ou sans-serif) afin de s'assurer qu'au moins l'une d'entre elles aura été trouvée sur l'ordinateur du visiteur.

Si le nom de la police comporte des espaces, je conseille de l'entourer de guillemets, comme je l'ai fait pour « Arial Black ».

Utiliser une police personnalisée avec @font-face

Je trouve le choix des polices trop limité. 
Comment puis-je utiliser ma police préférée sur mon site web ?

Pendant longtemps, cela n'était pas possible. Aujourd'hui, avec CSS 3, il existe heureusement un moyen d'utiliser n'importe quelle police sur son site. Cela fonctionne bien avec la plupart des navigateurs.

Mais attention, il y a des défauts (ce serait trop beau sinon) :

• Il faudra que le navigateur de vos visiteurs télécharge automatiquement le fichier de la police, dont le poids peut atteindre, voire dépasser 1 Mo…
• La plupart des polices sont soumises au droit d'auteur, il n'est donc pas légal de les utiliser sur son site. Heureusement, il existe des sites comme fontsquirrel.com et dafont.com qui proposent en téléchargement un certain nombre de polices libres de droits. Je recommande en particulier fontsquirrel.com car il permet de télécharger des packs prêts à l'emploi pour CSS 3.
• Il existe plusieurs formats de fichiers de polices et ceux-ci ne fonctionnent pas sur tous les navigateurs.

Voici les différents formats de fichiers de polices qui existent et qu'il faut connaître :

• .ttf : TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs.
• .eot : Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire, produit par Microsoft.
• .otf : OpenType Font. Ne fonctionne pas sur Internet Explorer.
• .svg : SVG Font. Le seul format reconnu sur les iPhones et iPads pour le moment.
• .woff : Web Open Font Format. Nouveau format conçu pour le Web, qui fonctionne sur IE9 et tous les autres navigateurs.

En CSS, pour définir une nouvelle police, vous devez la déclarer comme ceci :

Le fichier de police (ici MaSuperPolice.eot) doit ici être situé dans le même dossier que le fichier CSS (ou dans un sous-dossier, si vous utilisez un chemin relatif).

Je croyais qu'il y avait plusieurs formats de police ?

Oui, d'ailleurs les .eot ne fonctionnent que sur Internet Explorer. L'idéal est de proposer plusieurs formats pour la police : le navigateur téléchargera celui qu'il sait lire. Voici comment indiquer plusieurs formats :

Pour tester le fonctionnement, je vous propose de télécharger une police sur Font Squirrel, par exemple Learning Curve Pro. Cliquez sur « @font-face Kit », cela vous permettra de télécharger un kit prêt à l'emploi avec tous les formats pour cette police.

Votre fichier CSS ressemblera au final à ceci :

La première (grosse) section @font-face permet de définir un nouveau nom de police qui pourra être utilisé dans le fichier CSS. Ensuite, nous utilisons ce nom de police avec la propriété font-family, que nous connaissons, pour modifier l'apparence des titres <h1>. Vous pouvez voir le résultat à la figure suivante.

Affichage d'une police personnalisée

Vous noterez quelques bizarreries dans le CSS généré par le site Font Squirrel. Le but est de pallier certains bugs sur Internet Explorer car les anciennes versions ne comprennent pas quand on définit plusieurs formats. Cela explique donc la présence d'un ?#iefix dans le code.

Créé avec HelpNDoc Personal Edition: Générateur d'aide complet