मैं @font-face के माध्यम से एक कस्टम फ़ॉन्ट लोड करने की कोशिश कर रहा हूं, जो लोकलहोस्ट पर फ़ॉन्ट फ़ाइल की सेवा कर रहा है।
style.css:
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: url(Lobster-Regular.ttf) format('ttf');
}
body {
font-family: "Lobster";
font-size: 28px;
}
index.html:
<!DOCTYPE hmtl>
<html>
<head>
<meta charset="utf8"/>
<title>@font-face test</title>
<link rel="stylesheet" href="style.css"/>
<head>
<body>
<p>Where is my font?!</p>
<body>
</html>
ये दो फाइलें प्लस लॉबस्टर- Regular.ttf उसी निर्देशिका पर रहती हैं। लेकिन जब मैं इस पृष्ठ पर पहुंचता हूं, तो लॉबस्टर फ़ॉन्ट लोड नहीं होता है। मैं अपने स्थानीय सर्वर से पेज का अनुरोध कर रहा हूं, और केवल फ़ायरफ़ॉक्स पर HTML फ़ाइल लोड नहीं कर रहा हूं। मैंने नेटवर्क मॉनिटर की जांच की, और फ़ॉन्ट फ़ाइल भी लोड नहीं हुई। कोई विचार?
3 जवाब
आज...
... उत्तर है "woff2 का उपयोग करें, woff fallback के साथ। ttf या otf या eot या svg का उपयोग न करें"। 2012 के बाद से वेबफोंट परिदृश्य काफी हद तक परिपक्व हो गया है, और मूल उत्तर चीजों के अलग होने के एक साल बाद भी वेबफोंट विनिर्देश के व्यापक रूप से अपनाने और मृत प्रारूपों के लिए समर्थन-हटाने के कारण अलग-अलग हो गए हैं।
लेकिन 2015 में वापस, मूल जवाब था:
प्रारूप संकेतक का उपयोग करना आमतौर पर एक अच्छा विचार है (हालांकि अधिकांश ब्राउज़र आमतौर पर नेटवर्क माइम प्रकार से फ़ॉन्ट का पता लगाने में सक्षम होंगे यदि आप इसे छोड़ देते हैं), लेकिन ttf प्रारूप स्ट्रिंग में से एक नहीं है; यह truetype होना चाहिए:
@font-face {
font-family: Lobster;
font-style: normal;
font-weight: 400;
src: url(Lobster-Regular.ttf) format("truetype");
}
ध्यान दें कि फ़ॉन्ट परिवार को उद्धृत करने की आवश्यकता नहीं है, जब तक कि नाम में विशेष वर्ण जैसे रिक्त स्थान, डैश आदि और URL को उद्धृत करने की आवश्यकता नहीं है, लेकिन इसके लिए
यह एक ब्राउज़र समस्या हो सकती है। इसी तरह की समस्या से निपटने के दौरान मुझे यह वाक्य रचना उपयोगी लगी:
@font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
क्या यह काम करता है?
@font-face {
font-family: 'Lobster';
src: local('Lobster'),
local('Lobster-Regular'),
url('Lobster-Regular.ttf');
}
जैसा पूछा गया, जवाब के रूप में पोस्ट किया।