CSS @ font-face bezwzględny adres URL z domeny zewnętrznej: czcionki nie ładuje w firefox

Question

http://fwy.pagodabox.com

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

mam moje czcionki i css umieszczona na serwerze pagodabox.com i Zajmuję sekcję sklepu na shopify. Chcę użyć tego samego arkusza stylów z witryny obsługiwanej przez pagodabox dla witryny shopify. Ale moje czcionki nie ładują się w Firefox, wersja 13.0.1

Czy jest jakiś problem z FF lub z moją składnią? Dzięki!!!

@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

Nie można użyć @ font-face w przeglądarce Firefox z czcionką hostowaną w innej domenie Jeśli chcesz określić czcionkę @ font-face przy użyciu bezwzględnego adresu URL lub czcionki hostowanej w innej domenie, należy go udostępnić za pomocą nagłówków Kontroli Dostępu, w szczególności zestawu nagłówkowego Access-Control-Allow-Origin na "*" lub domen dozwolonych na żądanie czcionki. Dotyczy to również czcionek hostowanych w innej subdomenie. Jeśli używasz Apache można spróbować umieścić to w .htaccess i zrestartować serwer

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

Jest to znane ograniczenie i jest faktycznie środkiem bezpieczeństwa w celu zapobiegania nadużyciom na innych serwerach.

Jeśli masz kontrolę serwera na serwerze, na którym znajdują się czcionki, możesz dostosować Apache, aby umożliwić tego typu połączenia. Więcej informacji na ten temat: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

Ale wiesz, że jeśli to zrobisz, pozwoli to wszystkim innym stronom na używanie tych czcionek na swoich stronach i wykorzystanie przepustowości.

Answer 3

Jeśli masz dostęp do serwera zdalnego, można dodać lokalny skrypt, aby ustawić odpowiednie nagłówki, jak i header('Access-Control-Allow-Origin: *'); następnie zrzuć plik czcionki. Na przykład, w PHP, tak:

(plik fnt.php w tym samym folderze z czcionkami)

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

?> 

Następnie można używać czcionek tak:

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

określając plik php zamiast pliku czcionki i przekazując plik czcionki jako argument ?f=fontfile.woff. Jeśli chcesz, aby parametr FONT_FOLDER wskazywał prawidłowy folder. Preg_replace jeśli dla bezpieczeństwa, uniemożliwia dostęp poza folderem czcionek.

Można również obsługiwać niektóre formy uwierzytelniania, aby upewnić się, że tylko używasz tych czcionek.

Można również rozważyć użycie opcji "Access-Control-Allow-Origin" innej niż "*", aby dokładnie określić, kto może uzyskać dostęp do plików czcionek.

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

pozwoli na dostęp z serwera www.fromthisserverican.com, co oznacza, że ​​wszystkie strony na www.fromthisserverican.com może używać czcionek, gdy strony na innych serwerach nie.

Answer 4

Możesz zezwolić na ładowanie zasobów z poddomeny, dodając następujący wiersz do swojego..htaccess plik

obciążenia zasobów z subdomeny:

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

obciążenia zasobów z innych dziedzin:

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

Źródło: 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> 

Pomogło mi to naprawić kwestia.