क्रोम में @font-face के लिए गलत MIME प्रकार

Chrome में @font-face घोषणा का उपयोग करके एक कस्टम फ़ॉन्ट लागू करने का प्रयास करते समय , डेवलपर्स को एक त्रुटि संदेश मिल सकता है जो दर्शाता है कि "संसाधन को फ़ॉन्ट के रूप में व्याख्या किया गया है लेकिन MIME प्रकार के एप्लिकेशन/ऑक्टेट-स्ट्रीम के साथ स्थानांतरित किया गया है।" यह समस्या फ़ॉन्ट फ़ाइल के MIME प्रकार और घोषणा में निर्दिष्ट अपेक्षित प्रकार के बीच एक बेमेल से उत्पन्न होती है।

इस विसंगति को हल करने के लिए, एक व्यापक @फ़ॉन्ट-फेस घोषणा को नियोजित किया जा सकता है जो विभिन्न ब्राउज़र आवश्यकताओं को पूरा करता है . निम्नलिखित क्रॉस-ब्राउज़र घोषणा क्रोम और फ़ायरफ़ॉक्स दोनों के साथ संगतता सुनिश्चित करती है:

@font-face {
  font-family: 'Font Name';
  src: url('FontName.eot');
  src: local('☺'),
         url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype');
}

.eot फ़ाइल इंटरनेट एक्सप्लोरर के लिए निर्दिष्ट है, जबकि अन्य ब्राउज़र या तो .woff या .ttf प्रारूप का उपयोग करते हैं। अपने स्रोत फ़ॉन्ट से इन विभिन्न प्रारूपों को उत्पन्न करने के लिए, फ़ॉन्ट स्क्विरल के फ़ॉन्ट-फेस जेनरेटर का लाभ उठाने पर विचार करें।

इसके अतिरिक्त, फ़ॉन्ट फ़ाइलों के लिए प्रासंगिक MIME प्रकार निर्दिष्ट करने के लिए एक .htaccess फ़ाइल कॉन्फ़िगर की जानी चाहिए:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

इन अनुशंसाओं का पालन करके, आप यह सुनिश्चित कर सकते हैं कि आपका कस्टम फ़ॉन्ट क्रोम सहित विभिन्न ब्राउज़रों पर ठीक से प्रदर्शित हो।