[BASH] Utiliser l'API fontello.com

placido — 2015-10-14T12:35:17Z

Allons directement dans le vif du sujet en créant un fichier

Makefile
chmod +x Makefile pour le rendre exécutable quelque part en amont de votre projet :

# Makefile FONT_DIR ?= ./css/icons PROJECT_NAME ?= projet_foo FONTELLO_HOST ?= http://fontello.com fontopen: @if test ! `which curl` ; 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}/`cat .fontello` fontsave: @if test ! `which unzip` ; then \ echo 'Install unzip first.' >&2 ; \ exit 128 ; \ fi @if test ! -e .fontello ; then \ echo 'Run `make fontopen` first.' >&2 ; \ exit 128 ; \ fi rm -rf .fontello.src .fontello.zip curl --silent --show-error --fail --output .fontello.zip \ ${FONTELLO_HOST}/`cat .fontello`/get unzip .fontello.zip -d .fontello.src rm -rf ${FONT_DIR}/* mv `find ./.fontello.src -maxdepth 3 \( -name "config.json" -o -name "*.woff" -o -name "*.ttf" -o -name "*.svg" -o -name "*.eot" \) ` ${FONT_DIR} mv `find ./.fontello.src -maxdepth 3 -name "${PROJECT_NAME}-codes.css"` ${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.

Ultime remarque, si vous constatez un problème d'affichage des icônes après une mise à jour, essayer de changer le paramètre en fin d'url dans la déclaration css font-face.

@font-face { font-family: 'projet_foo'; src: url('icons/projet_foo.eot?248676'); /* ... */ }

devenant par exemple :

@font-face { font-family: 'projet_foo'; src: url('icons/projet_foo.eot?1039286'); /* ... */ }

C'est un désagrément dû aux navigateurs, qui allouent un cache spécifique pour les webfonts.

blog.roxing.net

[BASH] Utiliser l'API fontello.com

Passons rapidement le script en revue