Fonts exotiques (FontAwesome) et problèmes liés (Firefox en particulier)

Je travail toujours sur mes applications sur mon serveur local, c’est plus pratique ! Je l’installe sur un poste de travail et je subversion avec GitHub ou autres pour pouvoir passer d’un poste de travail à un autre. (Avant j’avais un petit serveur web local chez moi mais bon je ne l’ais plus, c’est une autre histoire, du coup j’ai wamp installé sur mes machines, bref …)

Dernièrement j’ai installé une nouvelle machine de bureau pour travailler et après avoir tout configuré et récupéré le projet sur lequel je travail en symfony 2, j’ai eu la désagréable surprise de voir que Firefox n’interprétait pas les caractères spéciaux que j’utilise avec la police de caractère exotique : Font Awesome. Alors que Chrome et Opéra eux, ne semblait pas rencontrer de difficultés particulières !

J’ai donc chercher sur le web et voici quelques solutions pour les cas de figure classique :

Firefox n’importe pas les caractères des polices exotiques du fait du CDNService, si vous passez par l’url d’origine de la police et que donc vous ne l’installer pas dans votre application web.

La parade classique est de rajouter dans le .htaccess la permission de les importer :

<FilesMatch".(ttf|otf|eot|woff)$">
   <IfModulemod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Ensuite supprimez le cache de l’application et un F5 pour rafraîchir la page du navigateur.
Source de cette parade : http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/

Si comme moi vous télécharger l’ensemble de la police exotique, avec les fichiers css, pour les mettre dans votre application (ce qui évite de perdre les fonctionnalités si un jour le site est down) et que vous utilisez symfony sur un hébergement mutualisé pour lequel vous avez modifié les .htaccess pour permettre l’accès à l’application depuis la racine du site : Installer symfony 2 sur hébergement mutualisé, cela ne résoudra pas votre problème.
La parade dans ce cas est de reprendre les deux fichiers .htaccess que vous aviez créé. L’un étant dans à la racine de « myapp.dev » et l’autre dans le répertoire « myapp.dev/web » de votre application et ensuite de modifier pour chacun d’eux la ligne suivante :

RewriteCond %{REQUEST_URI} \.(css|gif|ico|jpg|js|png|swf|txt|pdf|doc|docx|mp3|svg|)$

En rajoutant  le format des fichiers contenus dans les dossiers de la police exotique que vous avez installé dans l’application :

RewriteCond %{REQUEST_URI} \.(css|gif|ico|jpg|js|png|swf|txt|pdf|doc|docx|mp3|svg|otf|eot|ttf|woff)$

Videz le cache de l’application et faite un F5 dans la fenêtre du navigateur pour rafraîchir la page, normalement le problème est résolu !

Publicités

About this entry