Lors de la création d'un site web, le choix des polices est assez limité puisqu'il est réduit aux polices dites standard, c'est-à-dire celles qui sont installées par défaut avec l'OS. Bien sûr, lorsqu'on précise la police à utiliser, on en propose plusieurs autres ainsi qu'une générique afin de de pallier l'absence éventuelle de cette police. Mais ceci n'augmente pas le choix. Tout au plus il limite les problèmes. Une autre solution est évidemment de créer des images contenant du texte en local. Ainsi, on a le choix entre toutes les polices de notre machine et le visiteur de votre site verra exactement la même chose que vous. Mais cette technique ne peut hélas s'étendre à autre chose qu'aux titres de pages et éventuellement de quelques sections tant le surcoût en terme de chargement est élevé. Heureusement, des solutions existent grâce aux CSS 2. Mais voici tout de suite un exemple.

 

Test 1 : Ce premier test utilise un fichier .eot. Les mots "Police Sherwood" ci-dessous devraient être écrits avec la police Sherwood même si elle n'est pas installée sur votre machine. Pour être sûr que ça fonctionne, cette police ne doit pas être déjà installée sur votre machine et les deux cadres bleus ci-dessous doivent contenir la même chose (à quelques décalages près).

 

une image

Police Sherwood

du vrai texte

 

Test 2 : Ce premier test utilise un fichier .pfr. Les mots "Exotic 350 Light" ci-dessous devraient être écrits avec la police Exotic 350 Light même si elle n'est pas installée sur votre machine. Pour être sûr que ça fonctionne, cette police ne doit pas être déjà installée sur votre machine et les deux cadres bleus ci-dessous doivent contenir la même chose (à quelques décalages près).

 

une image

Exotic 350 Light

du vrai texte

 

Voici ce que vous devez voir si ça fonctionne : capture d'écran.

1. Comment ça marche ?

Cette technique porte le doux nom de font embedding (en gros, "inclusion de police", enfin, vous voyez...) et consiste à créer un fichier contenant certains caractères d'une police donnée, à mettre ce fichier sur son site et à utiliser ce fichier pour afficher du texte dans cette police.

Comme d'habitude, on trouve deux standards : les Embedded OpenType (fichiers .eot) fonctionnant sous Internet Explorer, et les TrueDoc (fichiers .pfr, pour "Portable Font Resource") destinés aux utilisateurs de Netscape, Mozilla, etc. Mais on est habitués, non ?

Chacun des deux formats permet de ne convertir qu'une partie des caractères disponibles dans une police, de façon à alléger la fichier résultant. Mais on peut évidemment convertir entièrement la police, afin, par exemple, de pouvoir afficher du texte de manière dynamique.

2. Les avantages de cette technologie

Ils sont évidents. Le premier d'entre eux est qu'il n'est plus nécessaire de créer vos vingt titres de sections au format GIF ou JPEG pour être sûr que les visiteurs les verront bien dans cette jolie police que vous avez mis tant de temps à créer (ou pour laquelle vous avez dépensé tant d'argent). Le temps de chargement de vos pages s'en trouve subséquemment réduit puisqu'au lieu de charger plusieurs images, seule la police est chargée. Et comme elle est mise en cache, vous pouvez l'utiliser dans toutes vos pages ! Le dernier avantage n'est pas négligeable puisque les deux formats vous assurent que les polices ne pourront pas être réutilisées par d'autres personnes. En effet, chaque fichier .eot ou .pfr contient une liste des adresses ayant le droit d'utiliser la police. Ces adresses sont à spécifier lors de la création du fichier.

3. Comment on fait ?

3.1 Version .eot

Il faut tout d'abord fabriquer le fichier .eot qui contiendra tous les caractères utiles (éventuellement tous ceux de la police). Microsoft, sûrement par pur altruisme et certainement pas pour voir son format fétiche se répandre de part le monde, propose gratuitement WEFT (pour "Web Embedding Fonts Tool"), qui permet de fabriquer un fichier .eot à partir de n'importe quelle police installée sur votre machine. Enfin, je dis "n'importe quelle police" mais je m'emporte un peu... Il faut que l'opération soit autorisée, ce qui n'est pas toujours le cas. Rassurez-vous, pour chaque police trouvée, WEFT vous signale si c'est une police standard (inutile de l'inclure) ou si elle est interdite à toute inclusion.

Une fois ce fichier créé, il suffit d'ajouter un code comme celui qui suit dans les pages où vous souhaitez inclure votre police (ou bien dans votre feuille de style) :

 
3.2 Version .pfr

Là aussi, il faut commencer par créer son fichier .pfr. Après quelques recherches, j'ai trouvé la trace de plusieurs logiciels permettant de créer des .pfr mais je n'ai encore réussi à m'en procurer aucun. Un point pour Microsoft, sur ce coup... Bitstream proposait à une époque le logiciel WebFont Maker, mais cette époque est révolue. J'ai aussi lu plusieurs fois le nom de HexWeb Typography, mais le site censé l'héberger semble être inactif au moment où j'écris ces lignes. Essayez quand même si vous voulez : HexMac.

Admettons que vous ayez un fichier "toto.pfr" créé à partir de la police "Toto BT" (le nom exact est très important, c'est lui qui sera utilisé dans votre document HTML pour sélectionner cette police). Il vous suffit d'ajouter ce code dans les pages où vous souhaitez utiliser cette police, entre les balises <head>...</head> :

Note : Le JavaScript n'est appelé que pour permettre aux utilisateurs d'Internet Explorer d'installer le contrôle ActiveX autorisant la visualisation de la police.

4. Remarques

Si vous devez faire un choix entre les deux formats, là encore, c'est délicat. D'un côté, le navigateur le plus répandu est Internet Explorer et on peut créer très simplement des fichiers .eot avec WEFT. Mais de l'autre, il existe un contrôle ActiveX permettant d'utiliser les polices incluses dans des .pfr sous Internet Explorer (enfin, sauf pour les utilisateurs de Mac). Et si vous recherchez l'exhaustivité, sachez qu'il est tout à fait possible d'inclure à la fois un .eot et un .pfr, vous assurant ainsi une compatibilité optimale (mais aussi un surcroît de chargement).

5. Les liens

Microsoft dédie toute une partie de son site au sujet ô combien vaste de la typographie. C'est par ici :
www.microsoft.com/typography/

Une FAQ, pas très récente, mais dont je me suis inspiré pour écrire cette page :
members.tripod.com/~bhaavana/embedded/faq.html

Un tutorial extrêmement complet sur l'inclusion de polices selon les deux standards. Si vous voulez vous lancer là-dedans, c'est votre prochaine destination électronique en quittant cette page...
http://hotwired.lycos.com/webmonkey/design/fonts/tutorials/tutorial2.html

www.truedoc.com est un site affilié à Bitstream, traitant exclusivement des "dynamic fonts" (autre appellation des "embedded fonts"). On y trouve des explications, des exemples, et surtout, quelques polices au format .pfr grâcieusement mises à votre disposition.

Et bien sûr, on en parle aussi sur le très sérieux site du W3C, dans la section fonts.