Régler le problème « downloadable font: Failed to convert WOFF 2.0 font to SFNT » avec Font-Awesome

Image by Andreas Lischka from Pixabay

Font-awesome est une bibliothèque géniale (et gratuite de surcroit) pour embellir votre site web avec des icônes vectorielles.

Seulement lors d’un projet, je suis tombé sur l’erreur suivante :

l’icône Font-awesome ne se charge pas…

Aucune de mes icônes ne se chargent. Seul un carré dégueulasse subsiste.

Heureusement, la console de Firefox nous donne les erreurs suivantes:

Console d’erreur de Firefox: F12 pour l’afficher

Après avoir cherché du côté de la configuration CakePHP (les .htaccess du webroot) et Nginx, j’ai enfin trouvé (merci Google). Il s’agit en fait d’un problème de transfert de fichier en FTP !

En fait, WinSCP, que j’utilise, transfert les fichiers en mode Texte (ou ASCII) par défaut. Il faut transférer ces fichiers en mode binaire (binary) sans quoi ils seront altérés.

Solution : transférer les fichiers de polices en mode binaire avec WinSCP

Dans WinSCP, ça se passe dans Options > Préférences > Transferts. Cliquez sur Texte puis Éditer.

Ensuite dans dans Divers (tout en bas), Editez le masque de fichier, et renseignez les extensions des fichiers à exclure. Saisissez *.extension et passez à la ligne suivante si vous voulez ajouter une nouvelle extension de fichier.

Validez avec Ok, transférez à nouveau vos fichiers (ceux du répertoire /fonts de Font-awesome) et le tour est réglé !

Kevin
Développeur fullstack depuis 17 ans, j'aime résoudre des problèmes complexes et me lancer dans des projets stimulants. J'ai contribué à de nombreux produits : progiciels, site e-commerce, web services, API ou encore plateforme Saas. J'aime l'accessibilité, le clean code, l'automatisation et améliorer l'Expérience Utilisateur.

Laisser un commentaire