[BASH] Utiliser l’API fontello.com

générer et mettre à jour une police d’icônes webfont en quelques secondes

14 octobre 2015

Fontello propose de composer une webfont d’icônes sur mesure en piochant parmi plusieurs collections (Font Awesome, Web Symbols, ...) Le service est très bien fait, rapide et simple d’utilisation. Mais vous pouvez gagner encore plus de temps lors de l’ajout d’icônes supplémentaires an passant directement via l’API.

Allons directement dans le vif du sujet en créant un fichier Makefile [1] quelque part en amont de votre projet :

# Makefile

FONT_DIR      ?= ./css/icons
PROJECT_NAME  ?= projet_foo
FONTELLO_HOST ?= http://fontello.com

fontopen:
	@if test ! <code class='spip_code spip_code_inline' dir='ltr'>which curl</code> ; then \
		echo 'Install curl first.' >&2 ; \
		exit 128 ; \
		fi
	curl --silent --show-error --fail --output .fontello \
		--form "config=@${FONT_DIR}/config.json" \
		${FONTELLO_HOST}
	x-www-browser ${FONTELLO_HOST}/<code class='spip_code spip_code_inline' dir='ltr'>cat .fontello</code>


fontsave:
	@if test ! <code class='spip_code spip_code_inline' dir='ltr'>which unzip</code> ; then \
		echo 'Install unzip first.' >&2 ; \
		exit 128 ; \
		fi
	@if test ! -e .fontello ; then \
		echo 'Run <code class='spip_code spip_code_inline' dir='ltr'>make fontopen</code> first.' >&2 ; \
		exit 128 ; \
		fi
	rm -rf .fontello.src .fontello.zip
	curl --silent --show-error --fail --output .fontello.zip \
		${FONTELLO_HOST}/<code class='spip_code spip_code_inline' dir='ltr'>cat .fontello</code>/get
	unzip .fontello.zip -d .fontello.src
	rm -rf ${FONT_DIR}/*
	mv <code class='spip_code spip_code_inline' dir='ltr'>find ./.fontello.src -maxdepth 3 &nbsp; &nbsp; &nbsp; &nbsp; \( -name &quot;config.json&quot; -o -name &quot;*.woff&quot; -o -name &quot;*.ttf&quot; -o -name &quot;*.svg&quot; -o -name &quot;*.eot&quot; \)</code> ${FONT_DIR}
	mv <code class='spip_code spip_code_inline' dir='ltr'>find ./.fontello.src -maxdepth 3 &nbsp;-name &quot;${PROJECT_NAME}-codes.css&quot;</code> ${FONT_DIR}/codes.scss
	rm -rf .fontello.src .fontello.zip

Passons rapidement le script en revue

Tout d’abord, on doit éditer le script pour renseigner 2 informations :

FONT_DIR, qui est l’emplacement du dossier qui va recevoir les éléments issus de fontetto (.ttf, .woff. css, .css, ...), relativement au fichier Makefile. Personnellement j’ai choisi un dossier "icons" dédié à cela, et distinct des polices (webfonts) complètes qui elles sont dans un autre dossier "fonts".
PROJECT_NAME qui désigne le nom du projet.

A présent, direction fontello.com où vous pouvez commencer à composer votre webfont personnalisée projet_foo. Enregistrez (bouton en haut à droite), téléchargez le .zip et récupérez le fichier config.json (qui est le seul qui nous intéresse) et copiez le dans le dossier FONT_DIR.

À l’usage

À partir de maintenant, l’ajout ou modification d’icônes va se faire en un clin d’oeil via 2 commandes successives, issues du fichier Makefile :

make fontopen

inspecte le fichier config.json et ouvre le navigateur avec les paramètres d’édition sauvegardés.

make fontsave

récupère la version mise à jour du projet_foo en écrasant les anciens fichiers.

Pour ma part, c’est surtout le fichier projet_foo-codes.css avec les codes qui m’importe (voir et modifier au besoin la ligne 32) ; c’est pourquoi je renomme en codes.scss pour l’appeler ultérieurement dans la compilation SASS.