सीएसएस @ फॉन्ट-फेस पूर्ण यूआरएल: फोंट फ़ायरफ़ॉक्स में लोड नहीं

Question

http://fwy.pagodabox.com

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

मैं अपने फोंट और सीएसएस एक pagodabox.com सर्वर पर होस्ट है, और पर दुकान खंड के विकास कर रहा हूँ Shopify। मैं shopify साइट के लिए pagodabox होस्टेड साइट से एक ही स्टाइलशीट का उपयोग करना चाहता हूँ। लेकिन मेरे फ़ॉन्ट्स फ़ायरफ़ॉक्स में लोड नहीं हो रहे हैं, संस्करण 13.0.1

क्या एफएफ या मेरे वाक्यविन्यास के साथ कोई समस्या है? धन्यवाद!!!

@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

आप किसी भिन्न डोमेन पर होस्ट किए गए फ़ॉन्ट के साथ फ़ायरफ़ॉक्स में @ फ़ॉन्ट-फेस का उपयोग नहीं कर सकते हैं यदि आप एक पूर्ण URL का उपयोग करके @ फ़ॉन्ट-फेस के लिए फ़ॉन्ट निर्दिष्ट करना चाहते हैं, या किसी भिन्न डोमेन पर होस्ट किए गए फ़ॉन्ट, इसे एक्सेस कंट्रोल हेडर के साथ परोसा जाना चाहिए, विशेष रूप से एक्सेस-कंट्रोल-ऑर्डर-ओरिजिन हेडर '*' पर सेट किया गया है या डोमेन को फ़ॉन्ट का अनुरोध करने की अनुमति है। यह एक अलग उप-डोमेन पर होस्ट किए गए फोंट पर भी लागू होता है। आप अपाचे का उपयोग कर रहे हैं, तो आप इस अपनी .htaccess में आप दूरस्थ सर्वर से पहुँच है, तो सर्वर

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

यह एक ज्ञात सीमा है और वास्तव में अन्य सर्वरों के दुरुपयोग को रोकने के लिए एक सुरक्षा उपाय है।

यदि आपके पास सर्वर का सर्वर-स्तरीय नियंत्रण है, तो फोंट होस्ट किए जाते हैं, तो आप इन प्रकार के कनेक्शनों को अनुमति देने के लिए अपाचे को ट्विक कर सकते हैं। उस पर अधिक जानकारी: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

लेकिन पता है कि यदि आप ऐसा करते हैं, तो यह अन्य सभी साइटों को उनकी साइट पर उन फोंट का उपयोग करने और अपनी बैंडविड्थ का उपयोग करने की अनुमति देगा।

Answer 3

रख दिया और पुनः आरंभ करने की कोशिश कर सकते हैं, तो आप header('Access-Control-Allow-Origin: *'); तरह सही हेडर, स्थापित करने के लिए एक स्थानीय स्क्रिप्ट जोड़ सकते हैं और फिर फ़ॉन्ट फ़ाइल डंप करें। उदाहरण के लिए, PHP में, इस तरह:

(फ़ाइल fnt.php फोंट की एक ही फ़ोल्डर में)

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

?> 

तो फिर तुम फोंट इस तरह उपयोग कर सकते हैं:

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

फ़ॉन्ट फ़ाइल के बजाय php फ़ाइल निर्दिष्ट करना, और फ़ॉन्ट फ़ाइल को ?f=fontfile.woff तर्क के रूप में पास करना। यदि आप सही फ़ोल्डर को इंगित करने के लिए FONT_FOLDER पैरामीटर रखना चाहते हैं। सुरक्षा के लिए preg_replace, फ़ॉन्ट फ़ोल्डर के बाहर पहुंच को रोकने।

आप यह सुनिश्चित करने के लिए प्रमाणीकरण के कुछ रूप भी समर्थन कर सकते हैं कि आप केवल उन फ़ॉन्ट्स का उपयोग कर रहे हैं।

आप अपने फ़ॉन्ट फ़ाइलों तक पहुंचने के लिए निर्दिष्ट करने के लिए '*' के अलावा कुछ एक्सेस-कंट्रोल-ऑब्जेक्ट-उत्पत्ति का उपयोग करने पर भी विचार कर सकते हैं।

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

, सर्वर www.fromthisserverican.com से उपयोग की अनुमति होगी, जिसका अर्थ है कि www.fromthisserverican.com पर सभी पृष्ठों फोंट का उपयोग कर सकते हैं, जबकि अन्य सर्वर पर पृष्ठों नहीं हो सकता।

Answer 4

आप अपने लिए निम्नलिखित पंक्ति जोड़कर संसाधनों को उप डोमेन से लोड करने की अनुमति दे सकते हैं।सब-डोमेन से htaccess फ़ाइल

लोड संसाधन: सभी अन्य डोमेन से

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

लोड संसाधन:

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

स्रोत: 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> 

यह मैं मदद की ठीक करने के लिए मुद्दा।