CSS @font-face URL absolue de domaine externe: polices qui ne sont pas en cours de chargement dans firefox

Vous ne pouvez pas utiliser @font-face dans Firefox avec une police hébergé sur un domaine différent
Si vous souhaitez spécifier une police de @font-face en utilisant une URL absolue, ou une police hébergé sur un domaine différent, il doit être servi avec le Contrôle d'Accès des en-Têtes, plus précisément le Access-Control-Allow-Origin-tête défini à '*' ou les domaines autorisés à demander à la police. Ceci s'applique également aux polices hébergé sur un sous-domaine différent. Si vous utilisez Apache, vous pouvez essayer de mettre cela 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>

OriginalL'auteur Victor Ribeiro da Silva Eloy

Si vous avez accès à un serveur distant, vous pouvez ajouter un script local pour définir le bon en-têtes, comme header('Access-Control-Allow-Origin: *'); et 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 de caractères 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 à la place du fichier de police, et de passer le fichier de police de caractères comme argument ?f=fontfile.woff. Si vous voulez garder la FONT_FOLDER paramètre pour pointer vers le bon dossier. Le preg_replace si, pour la sécurité, la prévention de l'accès à l'extérieur du dossier de police.

Vous pouvez également soutenir une certaine forme d'authentification pour être sûr que vous êtes en utilisant ces polices.

Vous pouvez également envisager l'utilisation de certains Access-Control-Allow-Origin autre que '*' pour spécifier exactement qui peut accéder à vos fichiers de police.

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

permettra l'accès de serveur http://www.fromthisserverican.com, ce qui signifie que toutes les pages http://www.fromthisserverican.com peut utiliser les polices de caractères, tandis que des pages sur d'autres serveurs peuvent pas.

OriginalL'auteur 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.

OriginalL'auteur user5217969