सीएसएस @ फ़ॉन्ट-चेहरा फ़ायरफ़ॉक्स के साथ काम नहीं कर रहा है, लेकिन क्रोम और आईई के साथ काम कर रहा है

Question

निम्न कोड Google Chrome बीटा के साथ-साथ IE 7. में भी काम करता है। हालाँकि, फ़ायरफ़ॉक्स को इससे समस्या है। मुझे यह संदेह हो रहा है कि मेरी सीएसएस फाइलें कैसे शामिल हैं, यह समस्या है, क्योंकि मुझे पता है कि फ़ायरफ़ॉक्स क्रॉस-डोमेन आयात के बारे में बहुत अनुकूल नहीं है।

लेकिन यह सब केवल स्थिर HTML है और क्रॉस-डोमेन का कोई सवाल नहीं है।

मेरे लैंडिंग-पृष्ठ.html पर मैं ऐसा सीएसएस आयात करता हूं:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Main.css के भीतर मेरे पास एक और आयात है:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

और type.css के भीतर मेरे पास निम्नलिखित घोषणाएँ हैं:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

मेरे पास "font" नामक एक निर्देशिका है जो type.css के समान स्थान पर है। इस फ़ॉन्ट निर्देशिका में सभी woff / ttf / svg फाइलें आदि हैं।

मैं इस पर स्टम्प्ड हूं। यह क्रोम और IE में काम करता है लेकिन फ़ायरफ़ॉक्स पर नहीं । यह कैसे हो सकता है? मैं क्या खो रहा हूँ?

Comments

मैं इस समय FontSquirrel उत्पन्न निर्देशों और फोंट के साथ सटीक समस्या में चल रहा हूं।

— जेसन

परीक्षण प्रयोजनों के लिए आप <style>टैग के बीच अपने html में @ फॉन्ट-फेस घोषणाओं को जोड़ने का प्रयास कर सकते हैं और देख सकते हैं कि क्या आपके पास भी यही समस्या है?

— क्रिस_ओ

एक एकल अल्पविराम जोड़ने से यह समस्या भी हल हो सकती है, जैसे: url ('Sans-serif') प्रारूप ('woff')

— Farzan Balkani

Answer 1

स्थानीय रूप से साइट चला ( file:///)

फ़ायरफ़ॉक्स एक बहुत ही सख्त "फ़ाइल उरई मूल" ( file:///) नीति के साथ आता है : डिफ़ॉल्ट रूप से यह करने के लिए है कि यह अन्य ब्राउज़रों की तरह व्यवहार करें about:config, fileuriनिम्न प्राथमिकता को टॉगल करके, फ़िल्टर करके जाएं :

security.fileuri.strict_origin_policy

इसे गलत पर सेट करें और आपको विभिन्न पथ स्तरों पर स्थानीय फ़ॉन्ट संसाधनों को लोड करने में सक्षम होना चाहिए।

प्रकाशित साइट

मेरी टिप्पणी के अनुसार, और आप अपनी साइट को तैनात करने के बाद इस समस्या का सामना कर रहे हैं, आप यह देखने के लिए एक अतिरिक्त शीर्ष लेख जोड़ने का प्रयास कर सकते हैं कि क्या आपकी समस्या स्वयं को क्रॉस डोमेन समस्या के रूप में कॉन्फ़िगर करती है: ऐसा नहीं होना चाहिए, क्योंकि आप सापेक्ष पथ निर्दिष्ट कर रहे हैं, लेकिन मैं इसे वैसे भी आज़माऊंगा: अपनी .htaccess फ़ाइल में, निर्दिष्ट करें कि आप .ttff / .otf / .eot फ़ाइल के लिए एक अतिरिक्त शीर्ष लेख भेजना चाहते हैं।

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

सच कहूँ तो, मुझे इससे कोई फ़र्क नहीं पड़ने की उम्मीद है, लेकिन यह इतना सरल है कि यह कोशिश करने लायक है: अन्यथा अपने फ़ॉन्ट टाइपफेस के लिए बेस 64 एनकोडिंग का उपयोग करने की कोशिश करें , बदसूरत लेकिन यह भी काम कर सकता है।

एक अच्छा पुनर्कथन यहाँ उपलब्ध है

Comments

यदि आप स्थानीय स्तर पर काम नहीं कर रहे हैं, तो यह संभवतः हल नहीं होगा, लेकिन आप किसी भी तरह से एक लाइव साइट पर रूट-आधारित पथ का उपयोग करना चाह सकते हैं, अर्थात, "/ संसाधन / फ़ॉन्ट" जैसे रिश्तेदार के बजाय "../ फ़ॉन्ट ", लेकिन मैं थंबल्र के बारे में नहीं जानता: यदि आप साइट के लिए यूआरएल दे सकते हैं तो मैं इसे एक रूप दे सकता हूं।

— मैनुअल

क्रोम, सफारी में फ़ॉन्ट घोषणा ठीक काम करती है, यहां तक ​​कि वे सभी IE6 पर वापस जाते हैं ... लेकिन फ़ायरफ़ॉक्स नहीं।

— जेसन

आह आप कुख्यात क्रॉस-डोमेन समस्या के बारे में बोल रहे हैं: आप या तो अपने फॉन्ट का उपयोग बेस 64 एनकोडिंग में कर सकते हैं, या फॉन्ट को सेवा प्रदान करते समय एक अतिरिक्त "एक्सेस-कंट्रोल-अलाउंस-ओरिजिन" हेडर जोड़ने के लिए कह सकते हैं।

— मैनुअल

फिर फ़ायरफ़ॉक्स की क्रॉस डोमेन पॉलिसी कितनी हास्यास्पद है? जैसे, CDN और साइट एक ही डोमेन साझा करते हैं, बस अलग-अलग उप डोमेन।

— जेसन

@ हसन, गन्दा 64 बिट एन्कोडिंग या तो काम नहीं करता है? इसने मेरे लिए काम किया।

— कौशिक गोपाल

Answer 2

अपने .htaccess में निम्नलिखित जोड़ने के अलावा: (धन्यवाद @ मैनुअल)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

आप स्पष्ट रूप से इस तरह की .htaccess फ़ाइल में webfont माइम प्रकार जोड़ने की कोशिश करना चाहते हो सकता है:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

अंत में, मेरी .htaccess फ़ाइल इस तरह दिखती है (उस अनुभाग के लिए जो सभी ब्राउज़रों में वेबफोन्स को काम करने में सक्षम बनाता है)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

Comments

मेरे लिए भी काम किया। धन्यवाद जूलोदी!

— जेम्स

मेरे लिए एक आकर्षण की तरह काम करो! धन्यवाद

— Moxet जनवरी

क्या मेरे लिए भी यही तरकीब है। मुझे woff2 को भी जोड़ना था: AddType font / woff2 .woff2

— hdomos

Answer 3

मुझे भी यह समस्या हुई है। मुझे यहाँ उत्तर मिला: http://www.dynamicdrive.com/forums/showthread.php?t=63628

यह उस समाधान का एक उदाहरण है जो फ़ायरफ़ॉक्स पर काम करता है, आपको इस पंक्ति को अपने फ़ॉन्ट फेस सीएसएस में जोड़ने की आवश्यकता है:

src: local(font name), url("font_name.ttf");

Comments

घोषणा local('name')में डालने का font-faceअर्थ है "उपयोगकर्ता के कंप्यूटर पर फ़ॉन्ट 'नाम लोड करने का प्रयास करें। यदि यह नहीं पाया जाता है, तो वेबपॉन्ट लोड करें।" ( एमडीएन डॉक्स देखें )। फिर भी, खुशी है कि यह आपके लिए काम कर रहा है! :)

— मेंहदी

इसने "आपके लिए" काम किया क्योंकि आपके पास आपके कंप्यूटर पर स्थापित फ़ॉन्ट था। अन्य उपयोगकर्ता इसे नहीं देखेंगे। आपने इसे सिर्फ आपके लिए तय किया है।

— ह्यूगो डेलिंगिंग

Answer 4

मैं बस इसे यहाँ छोड़ दूँगा क्योंकि मेरे सहकर्मी ने संबंधित "फ़ॉन्ट-फेस फ़ायरफ़ॉक्स पर काम नहीं कर रहा है लेकिन हर जगह" समस्या का हल ढूंढ लिया है।

समस्या सिर्फ फ़ायरफ़ॉक्स फ़ॉन्ट-परिवार घोषणा के साथ खिलवाड़ कर रही थी, इसने इसे ठीक किया:

body{ font-family:"MyFont" !important; }

पुनश्च: मैं भी html5boilerplate का उपयोग कर रहा था।

Answer 5

मुझे भी यही समस्या आ रही थी। H1, H2 या जो भी शैली आप @ फॉन्ट-फेस नियम से लक्षित कर रहे हैं, उसके लिए अपने कोड की दोबारा जाँच करें। मैंने पाया font-family: 'custom-font-family' Arial, Helvetica etcकि फ़ायरफ़ॉक्स के अलावा हर ब्राउज़र में ठीक दिखने के बाद मुझे एक कोमा याद आ रही थी। मैंने कोमा जोड़ा और यह काम कर गया।

Answer 6

मेरे साथ भी ठीक यही समस्या आई. मुझे "फोंट" नामक एक नया फ़ोल्डर बनाना था और इसे wp_content में डालना था। मैं इसे अपने ब्राउज़र से इस तरह एक्सेस कर सकता हूं http://www.example.com/wp-content/fonts/CANDY.otf

पहले, फोंट फ़ोल्डर मेरी सीएसएस फ़ाइल के समान निर्देशिका में था, और @ फॉन्ट-चेहरा इस तरह दिखता था:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

जैसा कि मैंने ऊपर बताया, यह फ़ायरफ़ॉक्स में काम नहीं कर रहा था, केवल क्रोम के साथ था। अब यह काम कर रहा है क्योंकि मैंने एक निरपेक्ष मार्ग का उपयोग किया है:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Answer 7

मैं वास्तव में इस समस्या थी Ff4 एक पर MAC। मेरे पास एक स्थानीय विकास सर्वर चल रहा था और मेरे @ फॉन्ट-फेस घोषणा ने ठीक काम किया। मैं जीने के लिए माइग्रेट हुआ और एफएफ पहले पेज लोड पर सही प्रकार का 'फ़्लैश' करेगा, लेकिन जब टाइपिंग को गहरा करते हुए ब्राउज़र स्टाइलशीट में टाइपफेस डिफ़ॉल्ट हो जाता है।

मैंने निम्न घोषणा को .htaccess में जोड़ने के लिए समाधान पाया

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

पाया के माध्यम से

Answer 8

एक आसान समाधान जो किसी ने अभी तक उल्लेख नहीं किया है, वह सीधे आधारभूत एन्कोडिंग का उपयोग करके सीएसएस फ़ाइल में फ़ॉन्ट को एम्बेड कर रहा है।

यदि आप fontquirrel.com का उपयोग कर रहे हैं, तो फॉन्ट-फेस किट जनरेटर में विशेषज्ञ मोड चुनें , नीचे स्क्रॉल करें और CSS विकल्प के तहत बेस 64 एनकोड का चयन करें - डाउनलोड किया गया फॉन्ट-किट प्लग एंड प्ले करने के लिए तैयार होगा।

इससे पृष्ठ लोड समय को कम करने का फ्रिंज लाभ भी होता है क्योंकि इसके लिए एक कम HTTP अनुरोध की आवश्यकता होती है।

Comments

उठाया समाधान पर टिप्पणियों में बेस 64 एनकोड समाधान का उल्लेख है।

— कौशिक गोपाल

@ कौशिकगोपाल मुझे लगता है कि मुझे यह पोस्ट करने के बाद उत्तर को संपादित करना होगा।

— पियरे

Answer 9

मैं उल्लेख करता हूँ कि कुछ फोंट फ़ायरफ़ॉक्स में समस्या है अगर उनके फ़ाइल नाम में विशिष्ट वर्ण हैं। मैं हाल ही में 'मॉडुलस' के फॉन्ट के साथ एक मुद्दे पर आया हूं, जिसका नाम '237D7B_0_0' था। फ़ाइल नाम में अंडरस्कोर हटाकर और नए फ़ाइल नाम से मिलान करने के लिए सीएसएस को अपडेट करने से यह समस्या हल हो गई। समान वर्ण वाले अन्य फ़ॉन्ट में यह समस्या नहीं है जो बहुत उत्सुक है ... शायद फ़ायरफ़ॉक्स में एक बग। मैं केवल अल्फ़ान्यूमेरिक वर्णों तक फ़ाइल नाम रखने की सलाह दूंगा।

Comments

यह। MyFonts.com ने इस तरह नामित अपनी फ़ॉन्ट फ़ाइलों को थूक दिया और इसके परिणामस्वरूप फ़ायरफ़ॉक्स 35 सभी प्रकार के विचित्र तरीकों से प्रस्तुत हुआ। फ़ॉन्ट का नाम बदलने से समस्या हल हो गई।

— कोरिवर्ड

Answer 10

इस फ़ॉन्ट के लिए विशेष रूप से आपको Google फ़ॉन्ट API का उपयोग करना चाहिए:

http://code.google.com/webfonts/family?family=Droid+Sans

यदि आप अभी भी FontSquirrel के किट जनरेटर का उपयोग करना चाहते हैं, तो स्थानीय फ़ॉन्ट समस्याओं को समाप्त करने के लिए स्माइली हैक विकल्प का उपयोग करें। आपके द्वारा एक किट तैयार करने के बाद, जाँच लें कि उत्पन्न किया गया.html फायरफॉक्स में काम करता है। मुझे यकीन है कि यह करता है। अब इसे अपने सर्वर पर अपलोड करें - मुझे यकीन है कि यह वहां भी काम करता है क्योंकि FontSquirrel बहुत बढ़िया है।

हालाँकि, यदि आपने अपनी परियोजना में इसे एकीकृत करते समय जनरेट किए गए किट कोड को तोड़ दिया है, तो डिबगिंग के मानक तरीकों का उपयोग करें - 404 के लिए जाँच करें और जब तक समस्या न मिल जाए तब तक लाइन से जाएँ। WOFF को निश्चित रूप से FF में काम करना चाहिए, इसलिए शुरू करने के लिए एक अच्छी जगह है।

अंत में, यदि इनमें से कोई भी काम नहीं करता है, तो फायरफॉक्स को अपडेट करें। मैंने यह मानकर लिखा कि आप नवीनतम का उपयोग कर रहे हैं; लेकिन आपने यह नहीं बताया कि आप किस संस्करण में जाँच कर रहे हैं, ताकि आपकी समस्या भी हो सके।

Comments

वास्तव में आपको इसके लिए Google Font API का उपयोग नहीं करना चाहिए। फ़ायरफ़ॉक्स के साथ एक समस्या है जो फ़ॉन्ट वैरिएंट (इटैलिक, बोल्ड, आदि) को रोकता है यदि आपको स्थानीय रूप से स्थापित फ़ॉन्ट है तो इसका उपयोग किया जा सकता है। केवल इस तरह से मैंने पाया है कि स्माइली के साथ स्थानीय src घोषणा को समाप्त करना है (निश्चित रूप से, कोई भी अजीब चरित्र (s) करेगा, यह सिर्फ इतना है ... खुश है)।

— जेसन

यहाँ बग रिपोर्ट का लिंक दिया गया है: code.google.com/p/googlefontdirectory/issues/detail?id=13

— jason

Answer 11

अपने @font-faceनिर्देशों में स्थानीय स्रोत की घोषणा करने की कोशिश करें ।

फ़ायरफ़ॉक्स या Google फ़ॉन्ट API में एक ज्ञात बग है जो फ़ॉन्ट के वेरिएंट को स्थानीय रूप से स्थापित होने पर उपयोग किए जाने वाले फ़ॉरेस्ट को रोकता है, और परिभाषित स्थानीय नाम से मेल खाता है:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

स्थानीय घोषणा को प्रभावी ढंग से करने के लिए, बस अपने स्थानीय स्रोत को कुछ बकवास करें। इसके लिए आम तौर पर स्वीकार किए जाने वाले सम्मेलन स्माइली यूनिकोड चरित्र ( "☺") का उपयोग करना है। क्यों? पॉल आयरिश ने अपने ब्लॉग पर एक बड़ी व्याख्या की है:

http://paulirish.com/2010/font-face-gotchas/#smiley

Comments

नहीं पता था कि पॉलि एक नई बुलेट विधि के साथ आया था, इसे एक कोशिश करनी होगी और यह देखना होगा कि क्या यह मेरे एफएफ फ़ॉन्ट-फेस मुद्दों को हल करता है।

— कौशिक गोपाल

[अद्यतन: सहायक होते हुए भी, यह समस्या को हल नहीं करता है]। मुझे सही समाधान की ओर इशारा किया गया।

— कौशिक गोपाल

Answer 12

क्या आप इसे स्थानीय फ़ाइलों में या किसी वेब सर्वर से परीक्षण कर रहे हैं? विभिन्न निर्देशिकाओं में फ़ाइलों को क्रॉस-डोमेन नियमों के लिए अलग-अलग डोमेन माना जाता है, इसलिए यदि आप स्थानीय स्तर पर परीक्षण कर रहे हैं तो आप क्रॉस-डोमेन प्रतिबंधों को मार सकते हैं।

अन्यथा, यह संभवत: एक URL पर इंगित करने में मदद करेगा जहां समस्या होती है।

इसके अलावा, मैं सुझाव दूंगा कि फ़ायरफ़ॉक्स त्रुटि कंसोल को देखने के लिए कि क्या कोई सीएसएस सिंटैक्स त्रुटियां या अन्य त्रुटियां बताई गई हैं।

इसके अलावा, मैं आपको नोट करना चाहता हूँ कि शायद फ़ॉन्ट-वजन: दूसरे @ फ़ॉन्ट-फेस नियम में बोल्ड है।

Comments

हम्म .. हाँ डेविड, मुझे लगता है कि यह स्थानीय स्तर पर चल रहा है, लेकिन पहले मेरे पास एक ही निर्देशिका के साथ एक उपनिर्देशिका थी। तो मेरा type.css रूट फ़ोल्डर में निहित है और उसी स्थान के भीतर फ़ॉन्ट फ़ोल्डर निहित है। इसलिए type.css और फ़ॉन्ट फ़ोल्डर एक ही निर्देशिका में हैं। सुरक्षित पक्ष पर होने के लिए, मैंने इसे निर्देशिका से हटाने और सीधे फोंट रखने की कोशिश की। यह अभी भी फ़ायरफ़ॉक्स पर काम नहीं करता है।

— कौशिक गोपाल

मुझे अब लगने लगा है कि यह दो में से एक है: 1) मेरी कोडिंग में कुछ गड़बड़ है, अगर किसी को ऊपर के कोड से कुछ भी स्पॉट होता है, तो कृपया इसे इंगित करने के लिए इतना दयालु हो। 2) FF @ फॉन्ट-फेस और मल्टीपल फाइल इंपोर्ट को अच्छी तरह से ट्रीट नहीं करता है? मैं main.css का उपयोग करता हूं, जो @import type.cs का आयात करता है, जिसके बदले में फोंट के लिए फ़ोल्डर लिंक है? कोई प्रकाश लोग? Btw फ़ॉन्ट-वजन पकड़ने के लिए धन्यवाद @ डेविड!

— कौशिक गोपाल

फ़ायरफ़ॉक्स ठीक कई आयातों को संभालता है। आप कौन सा संस्करण उपयोग कर रहे हैं? FireBug का उपयोग करके कोड को डीबग करें; उन्मूलन की प्रक्रिया का उपयोग करें। स्थानीय रूप से कार्य करना उन समस्याओं का परिचय देता है, जिन्हें दूर से दूर किया जा सकता है। यह आप कैसे डिबग है!

— केसी

"विभिन्न निर्देशिकाओं में फ़ाइलों को क्रॉस-डोमेन नियमों के लिए अलग-अलग डोमेन माना जाता है" - नहीं, वे नहीं हैं।

— माइक चेम्बरलेन

Answer 13

जब मैं इस मुद्दे के साथ सामना किया गया था, तो एक .htaccess एक्सेस कंट्रोल की अनुमति दें मूल नियम ने मेरे लिए काम नहीं किया।

इसके बजाय, web.config में IIS में। नीचे दिखाया गया system.webServer ब्लॉक डालें।

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

यह मेरे लिए एक आकर्षण की तरह काम करता था। यदि आपको विशेष डोमेन तक पहुँच को प्रतिबंधित करने की आवश्यकता है, तो * डोमेन के साथ * बदलें।

Answer 14

फ़ायरफ़ॉक्स में ठीक से प्रदर्शित करने के लिए फ़ॉन्ट पाने में मुझे वही समस्या हो रही थी। यहाँ मुझे मेरे लिए काम करने के लिए मिला है। Url विशेषता में फ़ॉन्ट को रखने से पहले एक स्लैश जोड़ें। यहाँ मेरे पहले और बाद के संस्करण हैं:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

url में 'फोंट' से पहले प्रमुख स्लैश पर ध्यान दें? यह ब्राउज़र को रूट डायरेक्टरी में शुरू करने और फिर संसाधन तक पहुंचने के लिए कहता है। कम से कम मेरे लिए - समस्या का हल।

Answer 15

यदि आप बाहरी फोंट आयात करने की कोशिश कर रहे हैं तो आप अपने फ़ायरफ़ॉक्स और अन्य ब्राउज़र के साथ सबसे आम समस्या का सामना कर सकते हैं। कुछ समय आपका फ़ॉन्ट Google Chrome या किसी अन्य ब्राउज़र में अच्छा काम कर रहा है लेकिन हर ब्राउज़र में नहीं।

इस प्रकार की त्रुटि के बहुत सारे कारण हैं इस समस्या के पीछे एक सबसे बड़ा कारण पिछले प्रति-परिभाषित फ़ॉन्ट है। आपको सीएसएस कोड की प्रत्येक पंक्ति के अंत में महत्वपूर्ण कीवर्ड जोड़ने की आवश्यकता है:

उदाहरण:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

विवरण: अपनी सीएसएस फ़ाइल या कोड में ऊपर कोड दर्ज करें। ऊपर दिए गए उदाहरण में "Hacen सऊदी अरब" को अपने फ़ॉन्ट-परिवार के साथ बदलें और url को अपनी फ़ॉन्ट निर्देशिका के अनुसार बदलें।

यदि आप दर्ज करते हैं, तो आपके सीएसएस कोड ब्राउज़र में महत्वपूर्ण स्वचालित रूप से इस खंड पर ध्यान केंद्रित करते हैं और पहले से उपयोग की गई संपत्ति को ओवरराइड करते हैं। अधिक जानकारी के लिए देखें: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Answer 16

क्या आप फायरबग से जांच कर सकते हैं कि क्या आपको कोई 404 मिलता है? मुझे पास में समस्या थी और मैंने पाया कि एक्सटेंशन एक ही था लेकिन linux file.ttf file.TTF से अलग है ... और इसने फ़ायरफ़ॉक्स को छोड़कर सभी ब्राउज़रों के साथ काम किया।

काश यह मदद करता!

Comments

मुझे दृढ़ता से संदेह है कि यह केवल एक ब्राउज़र में 404'ing होगा और अन्य नहीं।

— जेसन

@ जज एक ब्राउजर दूसरे से अलग एक फिलाटाइप का उपयोग कर सकता है। :)

— iplaus

खैर, इस मामले में मैं जिन मामलों में भाग गया हूं, मैं 100% कह सकता हूं कि फायरबग का नेट पैनल इसे फॉन्ट को सफलतापूर्वक लोड करना दिखाता है।

— जेसन

Answer 17

यह एक समस्या है कि आप अपने फ़ॉन्ट-फेस के पथ को कैसे सेट करते हैं। चूंकि आपने पथ को "/" से प्रारंभ नहीं किया था, इसलिए फ़ायरफ़ॉक्स स्टाइलशीट के पथ के आधार पर फ़ॉन्ट को खोजने का प्रयास करेगा। इसलिए मूल रूप से फ़ायरफ़ॉक्स "रूट / सीएसएस / फ़ॉन्ट" निर्देशिका में आपके फ़ॉन्ट की तलाश कर रहा है "रूट / फॉन्ट" निर्देशिका। आप इसे आसानी से या तो फ़ॉन्ट फ़ोल्डर को css फ़ोल्डर में ले जा सकते हैं, या अपने फ़ॉन्ट पथ की शुरुआत में जोड़ सकते हैं।

इसे आज़माएं:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

Answer 18

इसे इस्तेमाल करे....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

Answer 19

मुझे भी ऐसी ही समस्या का समाधान करना पड़ा था। फोंटक्वायरल डेमो पेज एफएफ में काम कर रहा था, लेकिन मेरा अपना पेज नहीं था, भले ही सभी फाइलें एक ही डोमेन से आ रही थीं!

यह पता चला कि मैं अपनी स्टाइलशीट को एक निरपेक्ष URL (http://example.com/style.css) के साथ लिंक कर रहा था, इसलिए FF ने सोचा कि यह एक अलग डोमेन से आ रहा है। मेरी स्टाइलशीट लिंक href को /style.css में बदलने के बजाय मेरे लिए निश्चित चीजें तय करें।

Answer 20

शायद आपकी समस्या एक नामकरण-मुद्दा है, विशेष रूप से रिक्त स्थान और हाइफ़न के उपयोग (या नहीं) के संबंध में।

मुझे सिमिलर इश्यू हो रहा था, जो मुझे लगा कि मैंने फॉन्ट- / फैमिली-नेम के आसपास ऑप्शनल कोट्स (') को रखकर तय किया है , लेकिन यह वास्तव में एक नेमिंग इश्यू तय करता है।

मैं सीएसएस-विनिर्देश पर पूरी तरह से अद्यतित नहीं हूं, और विभिन्न ग्राहकों द्वारा चश्मा की व्याख्या करने के तरीके में कुछ अस्पष्टता है। इसके अतिरिक्त, यह पोस्टस्क्रिप्ट नामकरण परंपराओं से संबंधित भी लगता है, लेकिन कृपया मुझे सही करें अगर मैं गलत हूं!

वैसे भी जैसा कि मैं अब इसे समझ गया हूं, आपकी घोषणा दो संभावित अलग-अलग स्वादों के मिश्रण का उपयोग कर रही है।

@font-face {
  font-family: "DroidSerif Regular";

यदि आप Droid के वास्तविक परिवार के नाम पर विचार करेंगे , जिसमें सेन्स और सेरिफ़ सदस्य हैं, उदाहरण के लिए जैसे उनके बच्चे Sans Regular या Serif बोल्ड हैं , तो आप या तो रिक्त स्थान का उपयोग पहचानकर्ताओं को सुरक्षित रखने के लिए करते हैं, या आप रिक्त स्थान हटाते हैं और CamCasing का उपयोग करते हैं परिवार का नाम और उप-पहचानकर्ताओं के लिए हाइफ़न।

आपकी घोषणा पर लागू, यह कुछ इस तरह दिखेगा:

@font-face {
  font-family: "Droid Serif Regular";

या

@font-face {
  font-family: DroidSerif-Regular;

मुझे लगता है कि दोनों को पूरी तरह से कानूनी होना चाहिए, या तो उद्धरण के साथ या बिना, लेकिन मुझे विभिन्न ग्राहकों के बीच सफलता मिली है। हो सकता है, एक दिन, मेरे पास इस / इन isuu / s पर विवरण निकालने का कुछ समय हो।

इसमें शामिल कुछ पहलुओं को समझने में मुझे यह लेख सहायक लगा: http://mathiasbynens.be/notes/unquoted-font-family

इस लेख में विशेष रूप से पोस्टस्क्रिप्ट पर कुछ और विवरण हैं, और एडोब स्पेसिफिकेशन पीडीएफ के कुछ लिंक: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Answer 21

सेटिंग्स के साथ गड़बड़ करने की कोई ज़रूरत नहीं है बस फ़ॉन्ट-परिवार से उद्धरण और रिक्त स्थान निकालें:

यह

body {font-family: "DroidSerif Regular", serif; }

यह बन जाता है

body {font-family: DroidSerifRegular, serif; }

Answer 22

मेरे मामले में, मैंने फॉन्ट-फेस स्टाइल कोड डालने में समस्या का समाधान किया

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

शैली टैग में अपने index.html या php पृष्ठ पर हेडर में direclty। मेरे लिये कार्य करता है!

Answer 23

इस वजह से यह इस समस्या के लिए शीर्ष Google परिणामों में से एक है, मैं जोड़ना चाहूंगा कि मेरे लिए इस समस्या का हल क्या है:

मुझे फॉण्ट-फेस के src से फॉर्मेट (opentype) को हटाना पड़ा, तब इसने फ़ायरफ़ॉक्स में भी काम किया। इससे पहले क्रोम और सफारी में यह ठीक काम करता था।

Answer 24

हो सकता है कि यह आपके कोड की वजह से न हो, अपने फ़ायरफ़ॉक्स कॉन्फ़िगरेशन के कारण।

इसे Tool bar वेस्टर्न से यूनिकोड तक ट्राई करें

View > Text Encoding > Unicode

Answer 25

मुझे एक ही समस्या थी और सामग्री के लिए मेटा जोड़कर इसे हल किया:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

यदि आप अपने HTML में यूनिकोड पाठ रखते हैं तो फ़ायरफ़ॉक्स और एज में ऐसा होता है।

Answer 26

मुझे नहीं पता है कि आपने सिंटैक्स कैसे बनाया, क्योंकि मैंने फ़ॉन्ट घोषणा में svg का इस्तेमाल किया था, लेकिन फॉन्ट स्क्वॉयर में सिर्फ एक फ़ॉन्ट से बुलेट प्रूफ सिंटैक्स फॉन्ट-फेस बनाने के लिए एक बहुत अच्छा उपकरण है।

http://www.fontsquirrel.com/fontface/generator

Comments

धन्यवाद rnaud, मैं ऊपर के लिए इस्तेमाल किया फोंटकिरेल :)। बस टैब और रिक्त स्थान के साथ एक पठनीय रूप में सुधार किया गया।

— कौशिक गोपाल

आपने फ़ॉन्ट घोषणा में एसवीजी का उपयोग कभी नहीं किया है लेकिन आप फ़ॉन्ट गिलहरी का उपयोग करते हैं? फिर आपने फ़ॉन्ट घोषणा में SVG का उपयोग किया है।

— जेसन

@ हसन: आप फ़ॉन्ट गिलहरी के साथ एसवीजी का उपयोग कर बाहर निकल सकते हैं।

— रॉइसडेड

Answer 27

फ़ॉन्ट-फेस टैग के पथ में URL का उपयोग भी हो सकता है। यदि आप "http://domain.com" का उपयोग करते हैं, तो यह फ़ायरफ़ॉक्स में काम नहीं करता है, मेरे लिए इसे "http://www.domain.com" में बदल दिया।

Answer 28

मेरी समस्या यह थी कि विंडोज ने फॉन्ट को 'font.TTF' नाम दिया था और फ़ायरफ़ॉक्स ने 'font.ttf' की अपेक्षा की थी कि मैंने देखा कि लिनक्स में अपना प्रोजेक्ट खोलने के बाद, फॉन्ट का नाम बदलकर प्रॉपर नाम और सब कुछ रख दिया