Une fois n’est pas coutume, je laisse la parole à Jean-Pierre, un ami qui relie et corrige mes analyses d’expert avant publication, pour une analyse d’expert très contrôlée…

Problème

Vous êtes webmaster ? Il n’y a pas de sot métier. Mais vous en avez assez, dans la fabrication des sites que vous concevez, d’être limité à la petite demi-douzaine de polices que tous les navigateurs reconnaissent : Arial (ou Geneva, Verdana et Helvetica), Times et ses variantes, Georgia, Courier New et Comic ? Et à leurs substituts génériques, serif et sans serif ? De l’air, pitié ! gémissez-vous.

Eh bien, de l’air, vous pouvez en avoir. En fait, après avoir lu cet article, vous pourrez utiliser dans vos pages toutes les polices que vous voudrez, sans aucune limitation.

Attention, il ne s’agit pas d’employer votre police favorite dans une image que vous fabriquerez pour la mettre en ligne, comme beaucoup le font déjà pour leurs titres de paragraphes, non ; mais bel et bien de vous en servir dans vos textes !

Évidemment, il y a une ou deux petites conditions à respecter, mais elles sont faciles à remplir, et il n’y a pas d’exception.

Première solution

La première solution consiste à utiliser une police qui est déjà à la disposition de tous, car elle se trouve sur un serveur appartenant à Google : http://www.google.com/webfonts. Il suffira de la référencer, et voici comment : consultez ce serveur, faites votre choix, il est vaste ! Dès lors, utilisez les boutons au bas de la page pour voir ce que cela donnera, et pour obtenir le code à copier-coller dans votre feuille de style (CSS) afin que le navigateur qui lira votre page puisse trouver la (ou les) police(s) choisie(s). Vous pourrez ensuite y faire appel comme aux polices traditionnelles.

Seconde solution

Comme c’est la SECONDE solution, vous devinez qu’il n’y en aura pas de troisième *. Cette fois, il s’agit de travailler avec une police quelconque, ne se trouvant pas sur le site de Google mentionné plus haut, mais tout simplement sur votre ordinateur – ou que vous aurez téléchargée n’importe où (sans même devoir la conserver ensuite, si cela vous convient !). Je vais prendre un exemple.

Supposons que je brûle de faire, sur le site que je construis, des titres rédigés avec la police Algerian, un peu exotique et très jolie, mais qui n’est peut-être pas sur tous les ordinateurs. Par conséquent, le serveur qui recevra les fichiers de mon site n’est pas en mesure de la trouver puis de l’afficher ! Je serai donc obligé d’envoyer le fichier alger.ttf, qui contient cette police, sur le serveur de mon site, qui l’aura ainsi « sous la main », si je puis dire. Mettez-la en ligne où vous voudrez, soit à la racine de votre site, soit dans un répertoire spécial, par exemple www/polices, l’essentiel étant que votre feuille de style soit capable de la retrouver.

Vous devrez ainsi mentionner dans votre CSS la commande @font-face, ainsi conçue :

@font-face {
    font-family : "Algerian";
    src: url("http://www.monsite.com/polices/alger.ttf"); }

(Ces deux lignes sont les seules indispensables, on comprend bien pourquoi !)

Ensuite, j’emploierai librement cette nouvelle police comme bon me semble.

NB : vous allez rire, mais @font-face n’est pas une innovation. Elle existe depuis… 1998 ! Elle était reconnue par Internet Explorer 5 et faisait partie des spécifications de CSS2.0. Mais, comme elle employait le format EOT et que les autres navigateurs rechignaient à l’utiliser, elle fut supprimée dans CSS2.1. Elle refait surface avec CSS3, et cette fois, c’est bien parti pour durer…

Nouveau petit problème, et sa solution

Il eût été étonnant que le cancre des navigateurs Internet se satisfasse de cette seconde solution ! Internet Explorer, une fois de plus, a des exigences de diva, et renâcle à reconnaître un fichier de police au format TTF, puisqu’il préfère EOT. Et puis, il faut songer à l’avenir, quand le format SVG sera devenu courant.

Nous allons donc prendre toutes les précautions possibles pour n’avoir plus à revenir sur ce qui pourrait être une source d’ennuis, en mettant en ligne non pas UN fichier de police, mais… SIX ! Leurs extensions respectives seront TTF, EOT Lite, EOT, WOFF (Web Open Font Format, qui est tout simplement du TTF compressé), SVG et SVGZ (version gzippée de SVG) Mais où donc trouver une police dans ces six formats ?

Cette fois, nous irons sur le site www.fontsquirrel.com, qui, soit dit en passant, est une mine de polices (pas loin de 700 familles différentes), et qui offre également un générateur de fichiers de polices : cliquez, dans le menu, sur @font-face Generator, et vous aboutirez à la page de cet instrument, capable de fabriquer à la commande jusqu’à six fichiers différents pour la même police… que vous lui fournirez. Laissez le bouton-radio sur Optimal, cochez la case Agreement pour certifier que vous avez le droit d’utiliser la police à traiter, puis cliquez sur le bouton + Add Fonts, ce qui va vous permettre d’envoyer vers le générateur le fichier de la police qui vous intéresse. Attention, ici, petite difficulté, c’est le nom du fichier qu’il faut donner, pas le nom de la police elle-même ! Dans le cas présent, alger.ttf, et non pas Algerian. Au bout de quelques secondes apparaît un nouveau bouton Download Your Kit, par lequel vous récuperez votre commande. Elle contient les six fichiers de polices demandés, ainsi qu’une page HTML de démo (visionnage des caractères de la police), un inutile texte permettant de recommencer la même opération dans le générateur, le répertoire des fichiers attachés à la page de démo, et surtout le code à coller dans votre feuille de style, qui se présente ainsi pour l’exemple que j’utilise (modifiez les URL pour les adapter à l’emplacement réel des fichiers sur le serveur de votre site) :

@font-face {
    font-family: 'AlgerianRegular';
    src: url('alger-webfont.eot');
    src: url('alger-webfont.eot?#iefix') format('embedded-opentype'),
    url('alger-webfont.woff') format('woff'),
    url('alger-webfont.ttf') format('truetype'),
    url('alger-webfont.svg#AlgerianRegular') format('svg');
    font-weight: normal;
    font-style: normal;}

Naturellement, il ne vous reste plus qu’à envoyer, sur le serveur de votre site et dans votre répertoire de polices, les six fichiers générés – à moins que, moins précautionneux que la moyenne ou désireux de vivre dangereusement, vous fassiez l’impasse sur certains d’entre eux. Pour vous en servir, c’est comme d’habitude, on emploie font-family. Mais vous connaissez déjà…

Jean-Pierre Marquet

*NDLR : sinon, il aurait employé le mot deuxième. J’ai bien appris ma leçon…