web-dev-qa-db-fra.com

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

http://fwy.pagodabox.com

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

Mes polices et mes css sont hébergés sur un serveur pagodabox.com et je développe la section boutique de Shopify. Je souhaite utiliser la même feuille de style du site hébergé pagodabox pour le site shopify. Mais mes polices ne se chargent pas dans Firefox, version 13.0.1

Existe-t-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;
}
cssfont-face
20
j-man86

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 à l'aide d'une URL absolue ou une police hébergée sur un autre domaine, vous devez ê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. Ceci s'applique également aux polices hébergées sur un sous-domaine différent. Si vous utilisez Apache, vous pouvez essayer de le mettre dans votre fichier .htaccess et de redémarrer 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>
34
Victor Ribeiro da Silva Eloy

Ceci est une limitation connue et constitue en fait une mesure de sécurité visant à empêcher les abus d’autres serveurs.

Si vous possédez un contrôle au niveau 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 agissiez ainsi, cela permettrait à tous les autres sites d’utiliser ces polices sur leur site et d’utiliser votre bande passante.

7
Ben Dyer

Si vous avez accès au serveur distant, vous pouvez ajouter un script local pour définir les en-têtes appropriés, tels que header('Access-Control-Allow-Origin: *');, 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>

en spécifiant le fichier php à la place du fichier de police et en transmettant le fichier de police en tant qu'argument ?f=fontfile.woff. Si vous souhaitez conserver le paramètre FONT_FOLDER pour qu'il pointe vers le bon dossier. Le preg_replace est une sécurité, empêchant tout accès en dehors du dossier de polices.

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

Vous pouvez également envisager d’utiliser un contrôle d’accès autre que «*» pour spécifier exactement qui peut accéder à vos fichiers de polices.

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

autorisera l'accès à partir du serveur www.fromthisserverican.com, ce qui signifie que toutes les pages du site www.fromthisserverican.com peuvent utiliser les polices, contrairement aux pages d'autres serveurs.

5
FrancescoMM
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é à résoudre le problème. 

0
user5217969

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

Charger les ressources du 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>

Charger des ressources 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

0
Arvind Bhardwaj