Des geekeries, de la MAO, de tout et de rien…
Je suis
Charlie

Conversion de polices pour le web

Icône auteur nah, Icône canondrier 13 juillet 2014, Icône commentaire
Mots clés Icône catégorie blog, Internet, PluXml, classé dans Icône catégorie Blog, Asrall, Internet

En faisant l'adaptation d'un thème provenant de http://templated.co vers pluxml, je me suis rendu compte que les polices de caractères utilisées sont stockées chez google.

Déjà que je n'utilise pas de google-ads, google-stats (whatever the name is), je ne vois pas pourquoi je changerais de pratique pour ces fonts.

Donc :

Pour cela, utilisons fontforge (apt install fontforge).

Créons un répertoire "generated" dans src, puis utilisons cette petite commande (ici avec bash) :

for file in *; \
do fontforge -c 'import fontforge;  \
font = fontforge.open("'$file'");  \
font.generate("../generated/'$(basename $file .otf)'-gen.ttf");  \
font.generate("../generated/'$(basename $file .otf)'-gen.woff");  \
font.generate("../generated/'$(basename $file .otf)'-gen.eot");  \
font.generate("../generated/'$(basename $file .otf)'-gen.svg");';  \
done

Quelques secondes plus tard, j'obtiens les 90 fichiers ttf, woff, eot et svg.

Il ne reste plus qu'à modifier la feuille de style pour pointer sur ces polices

Critique de fin d'article : franchement, générer 4 fichiers pour une police de caractère, c'est abusé. Pour être compatible avec tous les navigateurs, ça fait 28 Mo de fonts…

Édit 2014-07-15 23:07 le format eot est pour les « anciennes » versions d'Internet Explorer, les formats ttf et wouf ! woff sont gérés par presque tous les navigateurs récents, le format woff étant d'ailleurs recommandé, le svg, c'est pour les anciennes versions de Chrome et Opera.

Source : http://www.w3schools.com/css/css3_fonts.asp