CSS @ font-face URL absolue du domaine externe: les polices ne se charge pas dans Firefox

Question

http://fwy.pagodabox.com

http://friends-with-you.myshopify.com/

J'ai mes polices et css hébergé sur un serveur pagodabox.com, et je développe la section du magasin sur shopify. Je souhaite utiliser la même feuille de style du site hébergé par pagodabox pour le site shopify. Mais mes polices ne se chargent pas dans firefox, version 13.0.1

Y at-il un problème avec FF ou avec ma syntaxe? Merci!!!

@font-face { 
    font-family:'IcoMoon'; 
    src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot'); 
    src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.svg#IcoMoon') format('svg'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.ttf') format('truetype'); 
    font-weight:normal; 
    font-style:normal; 
} 

@font-face { 
    font-family:'square'; 
    src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot'); 
    src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.ttf') format('truetype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.svg#SquareSerifLightRegular') format('svg'); 
    font-weight:normal; 
    font-style:normal; 
} 

Answer 1

Vous ne pouvez pas utiliser @ font-face dans Firefox avec une police hébergée sur un domaine différent Si vous souhaitez spécifier une police pour @ font-face en utilisant une URL absolue, ou une police hébergée sur un domaine différent, il doit être servi avec des en-têtes de contrôle d'accès, en particulier l'en-tête Access-Control-Allow-Origin défini sur '*' ou les domaines autorisés à demander la police. Cela s'applique également aux polices hébergées sur un sous-domaine différent. Si vous utilisez Apache, vous pouvez essayer de mettre dans votre .htaccess et redémarrez le serveur

AddType application/vnd.ms-fontobject .eot 
AddType font/ttf .ttf 
AddType font/otf .otf 
<FilesMatch "\.(ttf|otf|eot)$"> 
<IfModule mod_headers.c> 
Header set Access-Control-Allow-Origin "*" 
</IfModule> 
</FilesMatch> 

Answer 2

Ceci est une limitation connue et est en fait une mesure de sécurité pour éviter les abus sur d'autres serveurs.

Si vous avez le contrôle du serveur sur lequel les polices sont hébergées, vous pouvez modifier Apache pour autoriser ce type de connexion. Plus d'informations à ce sujet: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

Mais sachez que si vous faites cela, cela permettrait à tous les autres sites d'utiliser ces polices sur leurs sites et d'utiliser votre bande passante.

Answer 3

Si vous avez accès au serveur distant, vous pouvez ajouter un script local pour définir les en-têtes corrects, comme header('Access-Control-Allow-Origin: *'); et puis vider le fichier de police. Par exemple, en PHP, comme ceci:

(fichier fnt.php dans le même dossier des polices)

<?php 

    define('FONT_FOLDER',''); 

    $MIMES=array(
     '.eot'=>'application/vnd.ms-fontobject', 
     '.ttf'=>'font/ttf', 
     '.otf'=>'font/otf', 
     '.woff'=>'font/x-woff', 
     '.svg'=>'image/svg+xml', 
    ); 


    $IKnowMime=MimeByExtension(GetExt($s)); 
    $f=preg_replace('/[^a-zA-Z.0-9-_]/','',$_REQUEST['f']); 

/* 
    header("Cache-Control: private, max-age=10800, pre-check=10800"); 
    header("Pragma: private"); 
    header("Expires: " . date(DATE_RFC822,strtotime(" 2 day"))); 
*/  
    header('Content-type: '.$IKnowMime); 
    header("Content-Transfer-Encoding: binary"); 
    header('Content-Length: '.filesize(FONT_FOLDER.$f)); 
    header('Content-Disposition: attachment; filename="'.$f.'";'); 

    header('Access-Control-Allow-Origin: *'); 

    readfile(FONT_FOLDER.$f); 

    function GetExt($File) { 
     $File=explode('.',$File); 
     if(count($File)==1) return ''; 
     return '.'.$File[count($File)-1]; 
    } 

    function MimeByExtension($ex) { 
     global $MIMES; 
     $ex=strtolower($ex); 
     if(isset($MIMES[$ex])) return $MIMES[$ex]; 
     else return FALSE; 
    } 

?> 

Ensuite, vous pouvez utiliser les polices comme ceci:

<style type="text/css"> 
@font-face { 
    font-family: 'default-font'; 
    src: url('http://www.website.com/fonts/ultra/fnt.php?f=arial.eot'); 
    src: url('http://www.website.com/fonts/ultra/fnt.php?f=arial.eot#iefix') format('embedded-opentype'), 
     url('http://www.website.com/fonts/ultra/fnt.php?f=arial.woff') format('woff'), 
     url('http://www.website.com/fonts/ultra/fnt.php?f=arial.ttf') format('truetype'), 
     url('http://www.website.com/fonts/ultra/fnt.php?f=arial.svg#arial') format('svg'); 
} 
</style> 

spécifiant le fichier php au lieu du fichier de police, et passant le fichier de police en tant qu'argument ?f=fontfile.woff. Si vous souhaitez conserver le paramètre FONT_FOLDER pointant vers le bon dossier. Le preg_replace si par sécurité, empêchant l'accès en dehors du dossier de police.

Vous pouvez également prendre en charge une certaine forme d'authentification pour vous assurer que vous utilisez uniquement ces polices.

Vous pouvez également utiliser Access-Control-Allow-Origin autre que '*' pour spécifier exactement qui peut accéder à vos fichiers de polices.

Access-Control-Allow-Origin: http://www.fromthisserverican.com 

permettra l'accès à partir www.fromthisserverican.com du serveur, ce qui signifie que toutes les pages www.fromthisserverican.com peuvent utiliser les polices, alors que les pages sur d'autres serveurs ne peuvent pas.

Answer 4

Vous pouvez autoriser le chargement de ressources à partir du sous-domaine en ajoutant la ligne suivante à votre.fichier htaccess

ressources de charge de sous-domaine:

# 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> 

ressources de charge de tous les autres domaines:

# Allow font, js, and css to be loaded from subdomain 
<IfModule mod_headers.c> 
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$"> 
     Header set Access-Control-Allow-Origin "*" 
    </FilesMatch> 
</IfModule> 

Source: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

Answer 5

AddType application/vnd.ms-fontobject .eot 
AddType font/ttf .ttf 
AddType font/otf .otf 
<FilesMatch "\.(ttf|otf|eot)$"> 
<IfModule mod_headers.c> 
Header set Access-Control-Allow-Origin "*" 
</IfModule> 
</FilesMatch> 

Cela m'a aidé à fixer le problème.