Permettre à Firefox d’utiliser des fonts en cross-domain
19 Juillet 2010
Avec l'attribut @font-face la possibilité d'utiliser des polices différentes des polices web-safe, plus traditionnelles, pour les web-designer se répand comme une trainée de poudre. Cependant, la gestion des polices est différentes selon les navigateurs, ils ne gèrent pas les même types de polices, ils n'ont pas les même systèmes de sécurité, du coup mes polices ne s'affichaient plus sur le navigateur Firefox...
En voulant optimiser l'hébergement de mes fichiers statiques pour mon blog, je les ai tous déplacés sur un virtual host dédié au service des fichiers statiques. Simplement je ne m'étais pas rendu compte que Firefox ne les affichait plus. En essayant de comprendre pourquoi Firefox refusait d'afficher les fonts, je suis tombé sur un article récent qui m'a permis de comprendre que Firefox implémente un mécanisme de protection pour les polices.
En effet, IE utilise des polices EOT (Embedded OpenType) qui sont capables de gérer les droits d'utilisation des polices, seulement il n'y a qu'Internet Explorer qui utilise ce format de police. De son coté Firefox a été développé pour accepter uniquement des polices qui viennent d'un domaine qui autorise le téléchargement de ces polices. Il faut donc indiquer au navigateur Firefox que les polices sont téléchargeables.
La solution est très simple et consiste à ajouter une entête particulière pour les fichiers de polices, pour se faire il faut ajouter la configuration suivante dans le fichier .htaccess sur le serveur de fichier statique :
<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
C'est tout simple, avec cette configuration Apache (qui nécessite le module Headers) permet à Firefox de télécharger les polices d'un autre domaine... Bon évidement la solution la plus simple est d'héberger vos polices dans le même domaine que votre site, mais je tenais à mettre tous mes fichiers statiques sur le serveur de fichiers statiques sans cookies...
Source : Blog The bright lines [EN] Crédit photo : Stock.xchng