Police téléchargeable sur firefox: mauvais URI ou accès intersite non autorisé
Je suis un webmaster à http://www.beperk.com (je vous donne L'URL pour que vous puissiez vérifier le problème) et j'ai beaucoup de problèmes en utilisant @font-face en CSS.
Je veux utiliser les foundicons de zurb dot com donc je les ai hébergés sur Amazon S3.
J'ai configuré le compartiment pour autoriser l'accès crossdomain comme spécifié ici: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
Et tout a commencé à fonctionner de manière transparente chez webkit, trident et gecko... surtout: lors de la navigation sur le web avec firefox (version 17, 18 et 19 testé) toutes les icônes échoue au hasard avec cette erreur:
Timestamp: 22/02/13 13:18:01
Error: downloadable font: download failed (font-family: "GeneralFoundicons" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
Et je dis au hasard car après un rechargement complet de la page (avec contrôle/Commande + R) Chaque icône semble normalement échouer à nouveau après quelques visites.
Quelqu'un peut-il trouver le problème?
4 réponses
Sur votre serveur, vous devrez ajouter:
Access-Control-Allow-Origin
Dans l'en-tête des fichiers de police, par exemple, si vous utilisez Apache, vous pouvez ajouter ceci à la .htaccess:
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Si quelqu'un utilise une ressource locale et fait face à ce problème dans firefox. Vous pouvez aller à about:config et modifier le security.fileuri.strict_origin_policy préférence à false.
Voir : https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs
Essayez d'utiliser des polices encodées en base64 implémentées comme:
@font-face {
font-family:"font-name";
src:url(data:font/opentype;base64,[paste-64-code-here]);
font-style:normal;
font-weight:400;
}
Voir: http://sosweetcreative.com/2613/font-face-and-base64-data-uri
Cela a parfaitement fonctionné.
J'ai résolu le problème dans Firefox (problème d'accès aux ressources locales) en utilisant uri: src: uri("../fuentes/EurostileLTStd.otf"); au lieu de src: uri("../fuentes/EurostileLTStd.otf");.