Les polices @ font-face ne fonctionnent que sur leur propre domaine

Question

Je suis en train de créer une police de type référentiel pour une utilisation sur mes sites web, de sorte que je peux appeler à n'importe quelle police dans le référentiel dans mon css, sans aucune autre set-up. Pour ce faire j'ai créé un sous-domaine sur lequel j'ai placé des dossiers pour chaque police dans le référentiel qui contenait les différents types de fichiers pour chaque police. J'ai aussi placé un fichier css appelé la police.css à la racine du sous-domaine et rempli avec de l' @font-face déclarations pour chacune des polices, les polices de caractères sont liés avec un lien absolu, de sorte qu'ils peuvent être utilisés n'importe où.

Mon problème est qu'il me semble que je ne peux utiliser les polices sur ce sous-domaine où ils sont situés, sur mes autres sites de la police ne s'affiche pas. À l'aide de firebug j'ai déterminé que font-face.fichier css a réussi à être lié et chargées. Alors pourquoi la police de ne pas charger correctement? Est-il de la protection sur les fichiers de police ou quelque chose? Je suis à l'aide de toutes les polices que je devrais être autorisé à ce faire avec, alors je ne vois pas pourquoi cela se produit. Peut-être que c'est un apache question, mais je peux télécharger la police juste bien quand j'ai un lien vers elle.

Oh, et juste pour préciser, je ne suis pas violer aucun droit d'auteur par cette mise en place, toutes les polices, je suis à l'aide d'une licence pour permettre ce genre de chose. Je tiens cependant à mettre en place un moyen que je suis seul peut avoir accès à ce répertoire de polices, mais c'est un autre projet.

Answer 1

C'est parce que Firefox (à partir de votre mention de Firebug) pense inter-domaine, même sous-domaine, Web, l'intégration des polices est une mauvaise idée.

Vous pouvez le convaincre de charger les polices de votre sous-domaine en ajoutant ceci au niveau supérieur .htaccess le fichier de sous-domaine où les polices sont en train d'être servi (mis à jour pour adapter le code à partir du même fichier en HTML5 Boilerplate):

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

En réponse à ceci:

Je tiens cependant à mettre en place un moyen que je suis seul peut avoir accès à ce répertoire de polices, mais c'est un autre projet.

Le W3C spec Access-Control-Allow-Origin ne veut rien dire de plus que ce soit un générique "*" ou à un domaine spécifique. Jusqu'à présent, j'ai trouvé cette SORTE de réponse qui suggère la validation de l' Origin - tête, mais je pense que c'est un Firefox-seulement d'en-tête. Je ne suis pas sûr que sur les autres navigateurs (ils n'ont même pas besoin de l' .htaccess astuce ci-dessus pour la croix-domaine des polices Web de travail).

Answer 2

Une autre façon de résoudre ce problème dans Firefox est d'intégrer la police directement dans le fichier css à l'aide de l'encodage base64. Particulièrement astucieux si vous n'avez pas accès à certains de la configuration mentionné ci-dessus.

Vous pouvez générer le code nécessaire sur fontsquirrel.com: dans le type de police du Kit de Générateur de choisir le mode expert, faites défiler vers le bas et sélectionnez Base64 Encode sous CSS Options - le téléchargement Police-Kit prêt à brancher et jouer.

Cela a aussi l'avantage de réduire le temps de chargement de page, car il nécessite moins de la requête http.

Answer 3

À l'aide de http://www.fontsquirrel.com/fontface/generator en mode "expert" et en choisissant base64 comme une option retourné une feuille de style.css avec le nécessaire des données encodées en base64 à utiliser dans notre feuille de style. Semble fonctionner dans tous les navigateurs que nous avons testés, sauf IE8.

Nous avons rencontré ce problème lors de l'application de thèmes à la 3e partie des outils comme la salsa pétition où nous sommes obligés de l'hôte de la police.

Merci pour toute l'aide tout le monde!