Si vous ne connaissez pas fontello…

Fontello est est générateur de fonticon en ligne. Il permet à travers une interface web de construire un set d’icônes en les choisissant parmi les fonticons open source les plus connues, ou bien en important ses propres SVG.
Il va plus loin, en mettant à disposition de quoi définir le nom de votre font, de préciser pour chaque icône le nom de la classe CSS à utiliser, les codes ASCII de chacun, et de télécharger le tout sous un zip. Un vrai petit bonheur qui simplifie la vie.

Une fois le zip à votre disposition, vous l’intégrez dans votre projet, pointez sur la feuille de style, puis utilisez les classes CSS des fonticones dans votre code. Très facile.

Intégrer Fontello dans votre projet

Chose beaucoup moins connue, Fontello intègre dans son zip un fichier de configuration. Celui-ci décrit simplement la fonticon générée. Il peut aussi servir à recharger votre package sur le site fontello et y retrouver toute votre configuration. En gérant aussi des token de session, vous pouvez vous servir de fontello comme d’une simple interface, modifier votre font et la réimporter facilement dans votre projet.

Exemple concret d’utilisation

Je suis dans un projet web, je souhaite ajouter une icône. J’ouvre fontello en chargeant ma typo actuelle avec une commande:

make fontopen

Mon navigateur s’ouvre alors, affiche le site fontello avec la fonticon de mon projet déjà chargée. 2 clics pour rajouter un icone (depuis mon propre SVG ou en choisissant simplement parmis tous les icones proposés). Ma font est prête, je clique sur « Save session » (qui remplace le bouton « Download webfont » sur le site).

Je retourne alors dans mon projet, et je tape la commande

make fontsave

La fonticone est alors téléchargée avec les modifications que je viens de faire, et le fichier CSS disponible. Je n’ai alors plus qu’à utiliser les classes CSS de mes fonticons que je viens d’ajouter.

Evidemment, le principe est le même si vous souhaitez ajouter plusieurs icones à la fois, modifier les noms des classes CSS, les codes ASCII, le nom de votre font…

Le code bash qui rend fontello disponible dans votre projet

Ci-dessous le code que j’intègre dans le Makefile de mes projets. Vous pouvez facilement l’adapter à votre projet avec les variables d’environnement :

  • FONT_DIR : indique là où doit se trouver votre font une fois extraite;
  • FONTELLO_HOST : si vous hébergez votre propre instance fontello
  • FONT_TOKENFILE : si vous utiliseriez plusieurs fonts dans votre projets – jouez alors avec cette variable et FONT_DIR lorsque vous invoquez une des commandes).

Limites du script

C’es prévu pour chrome, ça marche sous linux et mac, et je ne l’ai pas testé sous windows (pour cause que je n’ai pas de windows).
Si vous savez comment rendre les commandes make fontopen et make fontopenmac plus génériques (ouvre le navigateur par défaut), je suis preneur :)