@ फ़ॉन्ट-फेस woff फ़ाइलों पर 404 त्रुटि क्यों है?

Question

मैं @font-faceअपनी कंपनी की साइट पर उपयोग कर रहा हूं और यह काम करता है / बहुत अच्छा लग रहा है। फ़ायरफ़ॉक्स और क्रोम को छोड़कर .woffफ़ाइल पर एक 404 त्रुटि फेंक देगा । IE त्रुटि को नहीं फेंकता है। मेरे पास रूट पर स्थित फोंट हैं, लेकिन मैंने सीएसएस फ़ोल्डर में फोंट के साथ कोशिश की है और यहां तक ​​कि फॉन्ट के लिए पूरा यूआरएल दे रहा हूं। यदि मेरी css फ़ाइल से उन फोंट को हटा दें तो मुझे 404 नहीं मिलता है, इसलिए मुझे पता है कि यह एक सिंटैक्स त्रुटि नहीं है।

इसके अलावा, मैंने फोंटक्वाइरल उपकरण का उपयोग @font-faceफोंट और कोड बनाने के लिए किया है :

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

Comments

फ़ायरफ़ॉक्स और क्रोम के लिए आपके पास क्या संस्करण है? गेको 1.9.2 (फ़ायरफ़ॉक्स 3.6) WOFF के लिए समर्थन जोड़ता है।

— सोतीरिस

OTF में फिर से Woff में परिवर्तित करने का प्रयास करें। मेरे पास एक समान मुद्दा था और फ़ाइल पार्स करना भ्रष्ट था। विभिन्न प्रकार के फ़ॉन्ट में परिवर्तित करने के लिए यह एक अच्छी साइट है। onlinefontconverter.com

— stacksonstacksonstacks 21

Answer 1

मैं क्रोम में woff फ़ाइलों पर 404 - यही लक्षण अनुभव कर रहा था और IIS 6 के साथ विंडोज सर्वर पर एक एप्लिकेशन चला रहा था।

यदि आप एक ही स्थिति में हैं तो आप निम्न कार्य करके इसे ठीक कर सकते हैं:

समाधान 1

"केवल IIS प्रबंधक (वेबसाइट की संपत्तियों के HTTP हेडर टैब) के माध्यम से निम्नलिखित MIME प्रकार की घोषणाएं जोड़ें: .woff एप्लिकेशन / x-wo "

अद्यतन: के अनुसार WOFF फोंट के लिए MIME प्रकार और Grsmto वास्तविक MIME प्रकार है (कम से कम क्रोम के लिए) आवेदन / x-font-WOFF। x-woff Chrome 404s को ठीक करेगा, x-font-woff Chrome चेतावनियों को ठीक करेगा।

2017 तक : Woff फोंट को अब RFC8081 विनिर्देश के तहत माइम प्रकार font/woffऔर के रूप में मानकीकृत किया गया है font/woff2।

सीबी दुग्गन को धन्यवाद: http://sebduggan.com/posts/serves-web-fonts-from-yis

समाधान २

आप वेब कॉन्फ़िगरेशन में MIME प्रकार भी जोड़ सकते हैं :

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

Comments

नोट करें कि आपको Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’...applicationhost.config फ़ाइल के साथ संघर्ष के कारण त्रुटि हो सकती है । <remove fileExtension=".woff" />झूठी वेब डुप्लिकेट को निकालने के लिए, आप अपनी web.config फ़ाइल में नया माइमपाइप निर्दिष्ट करने से ठीक पहले जोड़कर इसे ठीक कर सकते हैं ।

— पीट

MIME प्रकार को मानकीकृत किया गया है application/font-woff।

— फर्नांडो कोर्रेया

यह किया चाल! आप एक ही मुद्दा है, लेकिन .woff2 फ़ाइल के साथ है, तो सिर्फ इतना है कि विस्तार के साथ एक और MIME प्रकार (या config) जोड़ने

— mapache

ऐसा लगता है कि विनिर्देश बदल गया है (फिर से)। आपकी सलाह application/x-font-woffअब पुरानी हो गई है, RFC 8081 के रूप में सही माइम का प्रकार अब font/woffऔर है font/woff2। अपने जुड़े हुए प्रश्न में अद्यतन उत्तर देखें

— लियाम

यह समाधान मेरे लिए काम नहीं किया। मेरे लिए क्या चाल थी: hotcakescommerce.zendesk.com/hc/en-us/articles/…

— Kim Lage

Answer 2

इस पोस्ट का जवाब बहुत मददगार और एक बड़ा समय बचाने वाला था। हालाँकि, मैंने पाया कि उपयोग करते समय FontAwesome 4.50, मुझे अतिरिक्त woff2प्रकार के एक्सटेंशन के लिए अतिरिक्त कॉन्फ़िगरेशन भी जोड़ना था क्योंकि नीचे दिए गए अन्य woff2प्रकार के अनुरोध कंसोल> त्रुटियों के तहत क्रोम के डेवलपर टूल में 404 त्रुटि दे रहे थे।

S.Serp की टिप्पणी के अनुसार, नीचे दिए गए कॉन्फ़िगरेशन को <system.webServer>टैग के भीतर रखा जाना चाहिए ।

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>

Comments

और आपका उल्लिखित टैग <staticContent>एक <system.webServer>टैग के अंदर होना चाहिए

— S.Serpooshan

विंडोज सर्वर 2012 r2, ASP.Net MVC5 से रिपोर्टिंग पूरी तरह से ठीक है।

— क्रॉमवेल

Answer 3

वास्तव में @ इयान रॉबिन्सन उत्तर अच्छी तरह से काम करता है लेकिन क्रोम उस संदेश के साथ शिकायत जारी रखेगा: " संसाधन को फ़ॉन्ट के रूप में व्याख्या किया गया लेकिन MIME प्रकार के अनुप्रयोग / x-woff के साथ स्थानांतरित किया गया "

यदि आपको ऐसा लगता है, तो आप बदल सकते हैं

आवेदन / x-WOFF

सेवा

आवेदन / x -font -woff

और आपके पास अब कोई क्रोम कंसोल त्रुटियां नहीं होंगी!

(Chrome 17 पर परीक्षण किया गया)

Comments

आप इसे कहां बदलते हैं? ब्राउज़र में या सर्वर पर?

— जेक विल्सन

जैसा कि ऊपर दिए गए उत्तर में बताया गया है, यह ओ सर्वर होना चाहिए। यह समाधान IIS 6 के साथ विंडोज सर्वर के लिए है

— adriendenat

क्रोम अभी भी मेरे लिए x-font-woff

— Sonic Soul

मेरी टिप्पणी को पुन: प्रसारित करने के लिए : ऐसा लगता है कि विनिर्देश बदल गया है (फिर से)। आपकी सलाह application/x-font-woffअब पुरानी हो गई है, RFC 8081 के रूप में सही माइम का प्रकार अब font/woffऔर है font/woff2। आपके जुड़े प्रश्न में अद्यतन उत्तर देखें

— लियाम

Answer 4

IIS7 के लिए समाधान

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

1. IIS रूट नोड पर जाएं और "MIME प्रकार" कॉन्फ़िगरेशन विकल्प पर डबल-क्लिक करें

2. शीर्ष दाईं ओर स्थित क्रिया पैनल में "जोड़ें" लिंक पर क्लिक करें।

3. यह एक संवाद लाएगा। .Woff फ़ाइल एक्सटेंशन जोड़ें और "आवेदन / x-font-woff" को इसी MIME प्रकार के रूप में निर्दिष्ट करें।

.Woff फ़ाइल नाम एक्सटेंशन के लिए MIME प्रकार जोड़ें

यहाँ मैंने IIS 7 में समस्या को हल करने के लिए क्या किया है

Comments

ध्यान दें कि लिंक-केवल उत्तर हतोत्साहित किए जाते हैं , एसओ उत्तर एक समाधान के लिए खोज का अंतिम बिंदु होना चाहिए (बनाम संदर्भों का एक और ठहराव, जो समय के साथ बासी हो जाते हैं)। लिंक को संदर्भ के रूप में रखते हुए कृपया यहां एक स्टैंड-अलोन सिनोप्सिस जोड़ने पर विचार करें।

— १०:१४

@kleopatra - विवरण के साथ उत्तर अपडेट करें और लिंक को हटा दिया।

— धानुका।।

"मुझे लगता है कि सर्वर स्तर से यह कॉन्फ़िगरेशन करना बेहतर होगा क्योंकि यह सभी वेबसाइटों के लिए लागू होता है।" - अच्छा, यह वास्तव में निर्भर करता है। यदि आप एक कॉर्पोरेट सर्वर के साथ काम कर रहे हैं, जो संभवतः कई आंतरिक ऐप चलाता है, हाँ, आप सही हैं। दूसरी ओर, यदि आप एक सार्वजनिक-सामना करने वाली वेबसाइट चलाते हैं, जिसे कई सर्वरों पर वितरित किया जाता है, तो web.config पद्धति "स्थिरता" के संदर्भ में जीत जाती है (यानी यह वहीं रहेगी, आप इसे एक पर कॉन्फ़िगर करना नहीं भूल सकते। सर्वर)।

— बालज

Answer 5

इयान के जवाब के अलावा, मुझे इसे काम करने के लिए अनुरोध फ़िल्टरिंग मॉड्यूल में फ़ॉन्ट एक्सटेंशन की अनुमति देनी थी।

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>

Answer 6

IIS सर्वर प्रबंधक चलाएँ (कमांड चलाएँ: inetmgr) माइम प्रकार खोलें और निम्नलिखित जोड़ें

फ़ाइल नाम एक्सटेंशन: .woff

MIME प्रकार : एप्लिकेशन / ऑक्टेट-स्ट्रीम

Answer 7

मैंने अनुमति, माइम प्रकार, आदि के बारे में एक टन की कोशिश की, लेकिन मेरे लिए यह समाप्त हो रहा है कि web.config ने IIS में स्टेटिक फ़ाइल हैंडलर को हटा दिया था, और फिर स्पष्ट रूप से इसे उन निर्देशिकाओं के लिए वापस जोड़ दिया जिनमें स्थिर फाइलें होंगी। जैसे ही मैंने अपनी निर्देशिका के लिए एक स्थान नोड जोड़ा और हैंडलर वापस जोड़ा, अनुरोधों को 404 मिलना बंद हो गया।

Answer 8

यदि आप IIS7 के तहत CodeIgniter का उपयोग कर रहे हैं:

अपने web.config फ़ाइल में जोड़ने WOFF के पैटर्न

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

आशा है ये मदद करेगा !

Answer 9

यह स्पष्ट हो सकता है, लेकिन इसने मुझे 404 के साथ कई बार ट्रिप किया है ... सुनिश्चित करें कि फोंट फ़ोल्डर अनुमतियाँ सही ढंग से सेट हैं।

Answer 10

साथ ही अपने URL राइटर की भी जांच करें। यह 404 फेंक सकता है अगर कुछ "अजीब" पाया गया था।

Answer 11

यदि आपके पास अपने वेबसर्वर कॉन्फिगर की पहुंच नहीं है, तो आप फ़ॉन्ट फ़ाइल को सिर्फ RENAME भी कर सकते हैं ताकि वह svg में समाप्त हो जाए (लेकिन प्रारूप को बनाए रखें)। क्रोम और फ़ायरफ़ॉक्स में मेरे लिए ठीक काम करता है।

Answer 12

यदि MIME प्रकार जोड़ने के बाद भी काम नहीं करता है, तो कृपया जांचें कि क्या "अनाम प्रमाणीकरण" साइट में प्रमाणीकरण अनुभाग में सक्षम है और दिए गए स्क्रीन शॉट के अनुसार "एप्लिकेशन पूल पहचान" का चयन करना सुनिश्चित करें।

Answer 13

IIS माइम प्रकार: .woff फ़ॉन्ट / x-woff (अनुप्रयोग / x-woff, या अनुप्रयोग / x-font-woff नहीं)

Comments

क्या आप कृपया अपने उत्तर का विस्तार कर सकते हैं और इस बारे में विस्तार प्रदान कर सकते हैं कि यह समस्या को कैसे हल करता है।

— कथा

मैंने अब इसे स्वीकृत उत्तर की ओर इशारा किया है ।

— लियाम

Answer 14

उसे हल कर लिया:

मुझे Mo'Bulletproofer विधि का उपयोग करना था

Comments

क्या इसका मतलब है कि आप अब WOFF का उपयोग नहीं कर रहे हैं? क्या ऐसा हो सकता है कि आपका वेबसर्वर WOFF फ़ाइलों की सेवा के लिए ठीक से कॉन्फ़िगर नहीं किया गया हो? उदाहरण के लिए इसे देखें: stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/…

— व्यापारी

मैंने अन्य मशीनों के साथ एन्कोडिंग के साथ फ़ॉन्ट का परीक्षण किया। ठीक प्रदर्शित करता है और कोई 404 त्रुटि नहीं है।

— dcp3450

यह मुझे अनुमति नहीं देगा। एन्कोडिंग लंबे समय तक है। यह यहाँ बताया गया है: paulirish.com/2010/font-face-gotchas

— dcp3450

उत्तर में लिंक अब मौजूद नहीं है।

— मुनीम मुन्ना