Conversion de polices pour le web
classé dans 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 :
- Premier point, vérifier si la licence me le permet, SIL Open Font License (à priori, oui, mais dans certaines conditions…),
https://github.com/theleagueof/raleway/blob/master/Open%20Font%20License%20FAQ.markdown#2-using-ofl-fonts-for-webpages-and-online-webfont-services - Second point, récupérer les sources des 18 fontes (ici donc -> http://www.impallari.com/projects/overview/matt-mcinerneys-raleway-family )
- Troisième point, les générer aux différents formats
à la conutilisés sur le www (wild wild west).
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.
Commentaires