CSS @ font-face URL assoluto dal dominio esterno: font non si carica in Firefox

Question

http://fwy.pagodabox.com

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

ho i miei caratteri e css ospitato su un server pagodabox.com, e sto sviluppando la sezione store on Shopify. Voglio usare lo stesso foglio di stile dal sito di pagodabox ospitato per il sito shopify. Ma i miei font non vengono caricati in firefox, versione 13.0.1

C'è un problema con FF o con la mia sintassi? Grazie!!!

@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

Non è possibile utilizzare @ font-face in Firefox con un carattere ospitato su un dominio diverso Se si desidera specificare un carattere per @ font-face utilizzando un URL assoluto o un carattere ospitato su un dominio diverso, deve essere servito con le intestazioni di controllo degli accessi, in particolare l'intestazione Access-Control-Allow-Origin impostata su "*" oi domini autorizzati a richiedere il carattere. Questo vale anche per i font ospitati su un sottodominio differente. Se si utilizza Apache si può provare a mettere questo nel vostro .htaccess e riavviare il server

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

Questa è una limitazione nota ed è in realtà una misura di sicurezza per impedire l'abuso ad altri server.

Se si dispone del controllo a livello di server del server su cui sono ospitati i caratteri, è possibile modificare Apache per consentire questo tipo di connessioni. Maggiori informazioni su questo: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

Ma sappi che se lo fai, questo permetterebbe a tutti gli altri siti di usare quei font sui loro siti e usare la larghezza di banda.

Answer 3

Se si ha accesso al server remoto, è possibile aggiungere uno script locale per impostare le intestazioni corrette, come header('Access-Control-Allow-Origin: *'); e quindi scaricare il file del carattere. Per esempio, in PHP, in questo modo:

(file fnt.php nella stessa cartella dei font)

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

?> 

Quindi è possibile utilizzare i font in questo modo:

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

specificando il file php invece del file di font e passando il file di font come argomento ?f=fontfile.woff. Se si desidera mantenere il parametro FONT_FOLDER in modo che punti alla cartella corretta. Il preg_replace se per sicurezza, impedendo l'accesso al di fuori della cartella dei font.

È inoltre possibile supportare alcune forme di autenticazione per assicurarsi che si stiano utilizzando solo quei tipi di carattere.

Si può anche considerare l'utilizzo di Access-Control-Allow-Origin diverso da "*" per specificare esattamente chi può accedere ai propri file di font.

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

consentirà l'accesso da www.fromthisserverican.com del server, il che significa che tutte le pagine www.fromthisserverican.com possono utilizzare i font, mentre le pagine su altri server non possono.

Answer 4

È possibile consentire il caricamento delle risorse dal sottodominio aggiungendo la seguente riga al proprio.htaccess

risorse carico dal sottodominio:

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

Carica risorse da tutti gli altri domini:

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

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

Questo mi ha aiutato a risolvere il problema.