CSS @ font-face absolute URL von einem externen Domain: Fonts Laden nicht in firefox

Question

http://fwy.pagodabox.com

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

Ich habe meine Schriften und CSS auf einem pagodabox.com Server gehostet und entwickle Shop Abschnitt einkaufen. Ich möchte das gleiche Stylesheet von der Pagodabox gehosteten Seite für die Shopify-Seite verwenden. Aber meine Schriftarten laden nicht in Firefox, Version 13.0.1

Gibt es ein Problem mit FF oder mit meiner Syntax? Vielen Dank!!!

Answer 1

Sie können @ font-face in Firefox nicht mit einer in einer anderen Domäne gehosteten Schrift verwenden Wenn Sie eine Schriftart für @ font-face mit einer absoluten URL oder einer in einer anderen Domäne gehosteten Schrift festlegen möchten, Es muss mit Zugriffssteuerungsheadern bereitgestellt werden, insbesondere mit dem Header Access-Control-Allow-Origin, der auf '*' festgelegt ist, oder den Domänen, die die Schriftart anfordern dürfen. Dies gilt auch für Schriftarten, die in einer anderen Subdomäne gehostet werden. Wenn Sie Apache verwenden, können Sie versuchen, dies in der .htaccess zu setzen und den Server neu starten

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

Dies ist eine bekannte Einschränkung und ist eigentlich eine Sicherheitsmaßnahme, um Missbrauch anderer Server zu verhindern.

Wenn Sie auf Serverebene die Kontrolle über den Server haben, auf dem die Schriftarten gehostet werden, können Sie Apache optimieren, um diese Art von Verbindungen zuzulassen. Weitere Informationen dazu: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

Aber wissen Sie, dass dies allen anderen Websites ermöglichen würde, diese Schriftarten auf ihren Websites zu verwenden und Ihre Bandbreite zu verwenden, wenn Sie dies tun.

Answer 3

Wenn Sie Zugriff auf den Remote-Server haben, können Sie ein lokales Skript fügen Sie die richtigen Header zu setzen, wie header('Access-Control-Allow-Origin: *'); und dann dump die Font-Datei. Zum Beispiel in PHP, wie folgt aus:

(Datei fnt.php im selben Ordner der Schriften)

<?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; 
    } 

?> 

Dann können Sie die Schriften wie folgt verwenden:

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

Angabe der PHP-Datei anstelle der Schriftartdatei und Übergeben der Schriftartdatei als Argument ?f=fontfile.woff. Wenn Sie möchten, dass der Parameter FONT_FOLDER auf den richtigen Ordner zeigt. Der preg_replace, wenn aus Sicherheitsgründen der Zugriff außerhalb des Font-Ordners verhindert wird.

Sie können auch eine Form der Authentifizierung unterstützen, um sicherzustellen, dass nur Sie diese Schriftarten verwenden.

Sie können auch einige Access-Control-Allow-Origins außer '*' verwenden, um genau festzulegen, wer auf Ihre Schriftartdateien zugreifen darf.

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

wird der Zugriff vom Server www.fromthisserverican.com ermöglichen, was bedeutet, dass alle Seiten auf www.fromthisserverican.com können die Schriftarten verwenden, während Seiten auf anderen Servern möglicherweise nicht.

Answer 4

Sie können zulassen, dass Ressourcen aus einer Subdomäne geladen werden, indem Sie die folgende Zeile hinzufügen..htaccess Datei

laden Ressourcen von Sub-Domain:

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

laden Ressourcen aus allen anderen Bereichen:

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

Quelle: 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> 

Das half mir das beheben Problem.