Les polices @ font-face ne fonctionnent que sur leur propre domaine
J'essaie de créer un type de référentiel de polices à utiliser sur mes sites Web, afin de pouvoir appeler n'importe quelle police du référentiel dans mon CSS sans aucune autre configuration. Pour ce faire, j'ai créé un sous-domaine sur lequel j'ai placé des dossiers pour chaque police dans le référentiel contenant les différents types de fichiers pour chaque police. J'ai également placé un fichier css appelé font-face.css à la racine du sous-domaine et l'ai rempli avec @font-face déclarations pour chacune des polices, les polices sont liées par un lien absolu afin de pouvoir être utilisées de n'importe où.
Mon problème est qu'il semble que je ne peux utiliser que les polices de ce sous-domaine où elles se trouvent, sur mes autres sites, la police ne s'affiche pas. À l'aide de Firebug, j'ai déterminé que le fichier font-face.css était correctement lié et chargé. Alors, pourquoi la police ne se charge-t-elle pas correctement? Y a-t-il une protection sur les fichiers de polices ou quelque chose? J'utilise toutes les polices avec lesquelles je devrais être autorisé à le faire, donc je ne vois pas pourquoi cela se produit. C'est peut-être un problème Apache, mais je peux télécharger la police très bien lorsque je m'y connecte.
Oh, et juste pour clarifier, je ne viole aucun droit d'auteur en configurant cela, toutes les polices que j'utilise sont autorisées à autoriser ce genre de chose. Je voudrais cependant mettre en place un moyen permettant à moi seul d'avoir accès à ce référentiel de polices mais c'est un autre projet.
En effet, Firefox (d'après votre mention de Firebug) pense que l'intégration de polices Web entre domaines, même sous-domaine, est une mauvaise idée.
Vous pouvez le convaincre de charger des polices à partir de votre sous-domaine en l'ajoutant au niveau supérieur .htaccess fichier du sous-domaine où vos polices sont servies (mis à jour pour adapter le code du même fichier dans HTML5 Boilerplate ):
<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
En réponse à cela:
Je voudrais cependant mettre en place un moyen permettant à moi seul d'avoir accès à ce référentiel de polices mais c'est un autre projet.
Les spécifications W3C pour Access-Control-Allow-Origin ne dit rien de plus qu'un caractère générique "*" ou un domaine spécifique. Jusqu'à présent, j'ai trouvé this SO answer qui suggère de valider l'en-tête Origin, mais je pense que c'est un en-tête uniquement pour Firefox. I ' Je ne suis pas sûr des autres navigateurs (ils n'ont même pas besoin du .htaccess astuce ci-dessus pour que les polices Web interdomaines fonctionnent).
Une autre façon de résoudre ce problème dans Firefox est d'incorporer la police directement dans le fichier css en utilisant l'encodage base64. Particulièrement astucieux si vous n'avez pas accès à certaines des configurations mentionnées ci-dessus.
Vous pouvez générer le code nécessaire sur fontsquirrel.com : dans le générateur de kit de polices, choisissez le mode expert, faites défiler vers le bas et sélectionnez Encodage Base64 sous Options CSS - le kit de polices téléchargé sera prêt à être branché et jouer.
Cela a également l'avantage de réduire le temps de chargement des pages car il nécessite une demande http en moins.
Si vous ne souhaitez pas autoriser les ressources de tous les domaines mais uniquement du sous-domaine de votre site, vous devez le faire comme:
# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" Origin_DOMAIN=$0
<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
Header set Access-Control-Allow-Origin %{Origin_DOMAIN}e env=Origin_DOMAIN
</FilesMatch>
</IfModule>
Source: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html
L'utilisation de http://www.fontsquirrel.com/fontface/generator en mode "expert" et le choix de base64 comme option renvoyaient un stylesheet.css avec les données encodées en base64 nécessaires à utiliser dans notre feuille de style. Semble fonctionner dans tous les navigateurs que nous avons testés, à l'exception d'IE8.
Nous rencontrons ce problème le plus souvent lorsque nous appliquons des thèmes à des outils tiers comme la pétition salsa où nous sommes obligés d'héberger la police.
Merci pour toute l'aide à tous!