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

Commentaires

#1 Le 14 juillet 2014 à 23:51, nah a dit :

Rectification : c'est 72 fichiers et non 90, pour un poids de 11 Mo et quelques. Les fichiers supplémentaires issus de la génération ne sont pas utiles pour le web.

#2 Le 15 juillet 2014 à 09:59, Damien a dit :

C'est vrai que tous ces formats de webfonts sont contraignant...
Cependant, deux formats commencent à prendre le dessus sur les dernières versions des navigateurs : ttf et woff. Mais il faudra sûrement encore quelques années (sic!) avant qu'un véritable standard n’émerge.

#3 Le 15 juillet 2014 à 21:07, nah a dit :

@Damien :
Question : pour WP7 et WP8, c'est toujours le format eot qui est utilisé ?

(troll) [sic] est à utiliser pour les citations, c'est le même genre que « en français dans le texte », mais là, pour indiquer que l'on a repris le texte tel quel, fôtes d'aurteaugraf comprises (sic).
Pour le soupir, c'est "sigh" (moyen mnémotechnique pour s'en souvenir : "The Sigh of Haruhi Suzumiya")

(Je réponds de suite : oui, ça s'écrit fautes d'orthographe, mais ici, je voulais souligner l'importance du (sic)).

C'est un peu comme « palette graphique » et « tablette graphique »…