Convertir une fonte TrueType ou OpenType en EOT Embedded OpenType sous Ubuntu Linux
Un titre à ralonge pour un petit tuto rapide qui va vous permettre de convertir vos polices de caractères OpenType (.otf) ou TrueType (.ttf) en Embedded OpenType (.eot), un format propre à Microsoft, utilisé dans Internet Explorer depuis Ubuntu Linux (je dis Ubuntu mais ça devrait fonctionner sur n’importe quel unix).
EOT est le seul format de police accepté par Internet Explorer, il va donc falloir convertir les polices que je souhaite utiliser avec @font-face pour assurer la compatibilité. Microsoft propose un outil pour faire ça (WEFT), mais il est mal fichu et ne tourne pas sous Wine (testé avec Wine 1.0.1 sous Ubuntu 9.10). On va donc se débrouiller autrement !
Let me introduce ttf2eot !
Il s’agit simplement d’un utilitaire en ligne de commande pour OpenTypeUtilities.cpp (une classe qui à la base vient de Chromium, le projet Open Source dont Google Chrome est issu). On télécharge donc les sources, et on fait un petit « make » dans le répertoire :
~/Bureau/ttf2eot-0.0.2-2$ make
Si tout se passe bien le binaire ttf2eot à été compilé (si ça foire, posez vous la question : est-ce que g++ est installé sur mon système ?).
Comme son nom l’indique, on a plus qu’a lui passer un ttf pour qu’il nous génére le eot correspondant :
~/Bureau/ttf2eot-0.0.2-2$ ./ttf2eot < ../delicious-123/Delicious-Roman.ttf > ../delicious-123/Delicious-Roman.eot
Deux paramètre : le fichier d’entrée, et de destination :
$ ./ttf2eot < input.ttf > output.eot
That’s all !
Convertir un fichier OpenType
C’est bien beau mais si notre police de caractère n’est pas en TrueType, ttf2eot ne sert à rien. Il n’existe pas d’équivalent pour OpenType, mais il est possible de convertir une fonte OpenType en TrueType. Voici la marche à suivre. On va avoir besoin de fontforge :
$ sudo apt-get install fontforge
Ensuite on écrit un petit script shell qui nous évitera de passer par l’affreuse interface de fontforge (à sauver en otf2ttf.sh par exemple) :
#!/usr/local/bin/fontforge
# Quick and dirty hack: converts a font to truetype (.ttf)
Print("Opening "+$1);
Open($1);
Print("Saving "+$1:r+".ttf");
Generate($1:r+".ttf");
Quit(0);
(Petit script récupéré ici, merci :-))
On s’en sert donc pour convertir notre fichier otf en ttf (et ensuite, on utilise ttf2eot pour enfin obtenir le fichier eot !) :
$ fontforge -script otf2ttf.sh ../delicious-123/Delicious-Roman.otf
Utilisation de @font-face
Si vous vous intéressez à eot c’est que vous allez utiliser @font-face (grillé !), mais savez-vous comment l’utiliser proprement ?
@font-face {
font-family:'Delicious';
src: url('Delicious-Roman.eot');
src: local('Delicious Roman'), local('Delicious'),
url('Delicious-Roman.otf') format('opentype');
}
Pour les explications, veuillez vous référer au billet de Paul Irish, qui est à l’origine de cette solution (qui en gros permet en une seule fois de déclarer une police pour tous les navigateur, sans requête HTTP superflue).
Quelques liens :
- compatibilité de @font-face (on y voit que Google Chrome n’active pas Web Font par défaut)
- la police pour laquelle je me suis penché sur le sujet, Delicious (ces conditions d’utilisations autorise @font-face)