डाउनलोड किया गया फ़ॉन्ट इस्तेमाल न हो, इसकी वजह यह हो सकती है कि CSS कोई दूसरा फ़ेस चुनता है, टेक्स्ट उसकी कवरेज से बाहर है, या उसका डिस्प्ले विंडो समाप्त हो चुका है। Mac पर, पहले देखें कि किसी एक लेबल को वास्तव में कौन-सा फ़ॉन्ट रेंडर कर रहा है, फिर चयन और लोडिंग की प्रक्रिया को पीछे की ओर जाँचें।

यह गाइड उस व्यक्ति के लिए है जो किसी वेबपेज का रखरखाव करता है, फ़ॉन्ट अनुरोध सफल होते देख सकता है, लेकिन फिर भी फ़ॉलबैक टेक्स्ट दिखाई देता है। जाँच के चरणों के लिए macOS पर Chrome इस्तेमाल करें। नीचे दिए गए काल्पनिक लेबल Panel 204 और फ़ैमिली नाम Sample Sans निदान समझाने के लिए हैं; इनका किसी खास वेबसाइट से संबंध नहीं है।

सफल डाउनलोड से वास्तव में क्या साबित होता है?

निदान को चार अलग-अलग सवालों के रूप में देखें: क्या संसाधन फ़ेच हुआ? क्या इस्तेमाल योग्य फ़ेस रजिस्टर हुआ? क्या CSS ने इन अक्षरों के लिए वही फ़ेस चुना? क्या रेंडरर ने उसे ड्रॉ किया? फ़ॉन्ट प्रीलोड करने से जल्दी फ़ेच शुरू होता है; इससे यह साबित नहीं होता कि दिख रहे टेक्स्ट के लिए कौन-सा फ़ॉन्ट इस्तेमाल हो रहा है। MDN: rel="preload"

फ़ॉन्ट मैचिंग डाउनलोड की गई फ़ाइलों के बजाय टेक्स्ट पर काम करती है। ब्राउज़र माँगी गई फ़ैमिली और फ़ॉन्ट प्रॉपर्टीज़ पर विचार करता है, फिर जाँचता है कि अक्षर समर्थित हैं या नहीं। इसलिए, एक लेबल में कई फ़ॉन्ट इस्तेमाल हो सकते हैं, और पेज के किसी दूसरे हिस्से के कारण ऐसा फ़ॉन्ट डाउनलोड हो सकता है जो आपके लक्ष्य लेबल के बारे में बहुत कम बताता है। W3C: CSS Fonts Module Level 4, font matching

अगली जाँच चुनने के लिए इस निर्णय तालिका का उपयोग करें। यह दस्तावेज़ीकृत लोडिंग और मैचिंग सीमाओं पर आधारित एक निदान-सहायिका है, ब्राउज़र में मापे गए नतीजों का रिकॉर्ड नहीं।

अवलोकन अगली जाँच इससे क्या पता लगाने में मदद मिलती है
कंप्यूटेड फ़ैमिली, अपेक्षित फ़ैमिली से अलग है लागू होने वाली CSS घोषणा का पता लगाएँ कैस्केड या टार्गेटिंग की समस्या
कंप्यूटेड फ़ैमिली सही है, लेकिन रेंडर हुआ फ़ॉन्ट अलग है फ़ेस डिस्क्रिप्टर और अक्षर कवरेज जाँचें चयन या फ़ॉलबैक की समस्या
JavaScript लोड हुए फ़ेस की सूचना देता है, लेकिन वह दस्तावेज़ के फ़ॉन्ट सेट में मौजूद नहीं है रजिस्ट्रेशन कोड जाँचें रजिस्ट्रेशन के बिना लोडिंग
रीलोड के बाद फ़ॉन्ट दिखाई देता है, लेकिन पहली विज़िट पर नहीं font-display और लोडिंग का समय जाँचें डिस्प्ले-विंडो का व्यवहार
सामान्य टेक्स्ट काम करता है, लेकिन कैनवस टेक्स्ट नहीं बदलता ड्रॉइंग का क्रम और कैनवस फ़ॉन्ट सेटिंग जाँचें अलग ड्रॉइंग ऑपरेशन

लक्ष्य लेबल को वास्तव में कौन-सा फ़ॉन्ट ड्रॉ कर रहा है?

प्रभावित पेज पर Command + Shift + C दबाएँ और टेक्स्ट चुनें। Elements में, प्रभावित लेबल को समेटने वाला सबसे छोटा एलिमेंट चुनें। Computed खोलें, फिर Rendered Fonts तक स्क्रॉल करें। Chrome इस दृश्य को रेंडर हुए टेक्स्ट में इस्तेमाल हुए फ़ॉन्ट देखने की जगह बताता है। Chrome DevTools: CSS features reference, Chrome DevTools: Apply other effects

रेंडर हुए फ़ेस और यह दर्ज करें कि उसका स्रोत लोकल है या नेटवर्क संसाधन। कंप्यूटेड font-family, font-weight, और font-style भी दर्ज करें। कंप्यूटेड फ़ैमिली माँगी गई फ़ॉन्ट स्टैक बताती है; रेंडर हुए फ़ॉन्ट का नतीजा बताता है कि ग्लिफ़ किस फ़ॉन्ट से आए। सिर्फ़ जाना-पहचाना दिखना कमज़ोर सबूत है, क्योंकि दो फ़ेस एक जैसे दिख सकते हैं। Chrome DevTools: What font is that?

अगर प्रभावित टेक्स्ट के लिए अपेक्षित फ़ेस दिखाई देता है, तो जाँच को दिखावट के खास अंतर—जैसे वज़न या फ़ीचर—की ओर ले जाएँ। अगर वह मौजूद नहीं है, तो नीचे आगे बढ़ें। परीक्षण करते समय मूल टेक्स्ट और व्यूपोर्ट को जस का तस रखें, ताकि हर अवलोकन की तुलना की जा सके।

क्या प्रभावी CSS अपेक्षित फ़ेस माँगती है?

Computed में प्रभावी फ़ॉन्ट प्रॉपर्टीज़ देखें, फिर उनकी घोषणाएँ खोजने के लिए Styles का उपयोग करें। Chrome इन दृश्यों में अंतर बताता है: Styles में ओवरराइड की गई घोषणाएँ भी शामिल होती हैं, जबकि Computed लागू हुए मान दिखाता है। अगर किसी कार्ड में कई लेबल हैं, तो टेक्स्ट वाले चाइल्ड को जाँचें; पैरेंट की फ़ॉन्ट घोषणा चाइल्ड के लिए पर्याप्त सबूत नहीं है। Chrome DevTools: CSS features reference

प्रभावी font शॉर्टहैंड के साथ अलग-अलग प्रॉपर्टीज़ भी जाँचें। उदाहरण के लिए, font: 16px sans-serif एक सामान्य फ़ैमिली चुनता है और छूटे हुए शॉर्टहैंड घटकों को रीसेट करता है, जिनमें वज़न और शैली शामिल हैं। यह font-feature-settings और font-variation-settings जैसी प्रॉपर्टीज़ को भी रीसेट करता है। अनपेक्षित मान के लिए ज़िम्मेदार घोषणा ठीक करें, फिर दोबारा जाँचें। MDN: font

इसके बाद, माँगी गई फ़ैमिली की तुलना संबंधित @font-face नियम में मौजूद font-family डिस्क्रिप्टर से करें। यह डिस्क्रिप्टर उस CSS फ़ैमिली का नाम तय करता है जिससे फ़ेस को संदर्भित किया जाता है; फ़ाइल का नाम वह नाम नहीं है जिसे एलिमेंट की फ़ॉन्ट स्टैक में रखना चाहिए। ब्राउज़र को दिया गया नियम जाँचें, जिसमें उसका src, वज़न, शैली और घोषित रेंज शामिल हैं। MDN: @font-face

वैरिएबल फ़ॉन्ट की समर्थित वज़न रेंज दो मानों के रूप में दी जा सकती है, जबकि स्टैटिक फ़ेस एक वज़न घोषित कर सकता है। इन डिस्क्रिप्टर को दिए गए संसाधन का सही वर्णन करना चाहिए। मेल न खाने की जाँच करें, लेकिन उसे अपने आप फ़ॉलबैक का कारण न मानें: अगर सटीक शैली उपलब्ध न हो, तो फ़ॉन्ट मैचिंग में विकल्प भी शामिल होते हैं। MDN: @font-face, W3C: Matching font styles

क्या कोई लोकल फ़ॉन्ट प्राथमिकता पा रहा है?

src में local() विकल्प देखें। जिस Mac पर वह फ़ॉन्ट इंस्टॉल है, वहाँ ब्राउज़र उसकी लोकल कॉपी इस्तेमाल कर सकता है, जबकि अलग से प्रीलोड किया गया वेबफ़ॉन्ट इस्तेमाल न हो। Chrome में इस स्थिति को अलग से जाँचने के लिए Rendering पैनल खोलें, Disable local fonts चालू करें और रीलोड करें। पहले और बाद के Rendered Fonts की तुलना करें, फिर सेटिंग वापस बंद कर दें। यह परीक्षण @font-face नियमों में मौजूद local() स्रोतों को लक्ष्य बनाता है। Chrome DevTools: Apply other effects

क्या फ़ेस सही दस्तावेज़ में लोड और रजिस्टर हुआ?

new FontFace() से बनाया गया फ़ेस, किसी फ़ॉन्ट सेट में जोड़े जाने से पहले लोड होना पूरा कर सकता है। दस्तावेज़ में रेंडरिंग के लिए उसे document.fonts में जोड़ना ज़रूरी है। दोनों ऑपरेशन के लिए ऐप्लिकेशन का लोडिंग पथ जाँचें; फ़ेस का लोड प्रॉमिस पूरा हो जाना अपने आप रजिस्ट्रेशन पूरा नहीं करता। MDN: CSS Font Loading API

नीचे दिया गया पूरा कंसोल निदान मौजूदा दस्तावेज़ में रजिस्टर हुए फ़ेस की सूची दिखाता है। इसे प्रभावित पेज के कंसोल संदर्भ में चलाएँ। यह लोड शुरू किए या स्टाइल बदले बिना सेट को पढ़ता है; यह रेंडर हुए ग्लिफ़ की पहचान नहीं करता। यहाँ ब्राउज़र-निर्भर व्यवहार चलाकर सत्यापित नहीं किया गया है।

(() => {
  const faces = Array.from(document.fonts, face => ({
    family: face.family,
    weight: face.weight,
    style: face.style,
    stretch: face.stretch,
    unicodeRange: face.unicodeRange,
    status: face.status
  }));

  console.table(faces);
  console.log("Registered face count:", faces.length);
})();

इस सूची से छूटे हुए रजिस्ट्रेशन और ऐसे रजिस्टर हुए फ़ेस में अंतर करें जो अब भी इस्तेमाल नहीं हो रहे। जिस एंट्री का स्टेटस error हो, उसके लिए टाइपोग्राफ़ी बदलने से पहले लोडिंग की विफलता जाँचें। loaded एंट्री लोडिंग की स्थिति बताती है, जबकि फ़ेस का चयन अब भी एलिमेंट और टेक्स्ट पर निर्भर करता है। MDN: CSS Font Loading API

document.fonts.check() को रेंडरिंग का सबूत न मानें। यह किसी ऐसी फ़ैमिली के लिए भी true लौटा सकता है जो मौजूद ही न हो। इसका वैकल्पिक टेक्स्ट आर्ग्युमेंट घोषित Unicode रेंज के आधार पर मैचिंग को सीमित करता है और अलग-अलग ग्लिफ़ की कवरेज की जाँच नहीं करता। इसी तरह, document.fonts.ready इस्तेमाल हुए फ़ॉन्ट की लोडिंग और लेआउट पूरा होने के बाद पूरा होता है; यह प्रमाणित नहीं करता कि हर घोषित फ़ेस रेंडर हुआ। MDN: FontFaceSet.check(), MDN: Document.fonts

क्या फ़ॉन्ट उन अक्षरों को सपोर्ट करता है जिन्हें आप जाँच रहे हैं?

CSS unicode-range और वास्तविक फ़ॉन्ट संसाधन, दोनों जाँचें। डिस्क्रिप्टर नियंत्रित करता है कि कौन-से अक्षरों के लिए फ़ेस इस्तेमाल हो सकता है। डिस्क्रिप्टर को बड़ा करने से फ़ाइल में मौजूद न होने वाले ग्लिफ़ नहीं बन सकते: फ़ॉन्ट का कैरेक्टर मैप भी मैचिंग का हिस्सा है। MDN: unicode-range, W3C: Matching font styles

U+0030-0039 तक सीमित एक उदाहरण नियम पर विचार करें। Panel 204 में केवल 2, 0, और 4 इस रेंज में आते हैं। अक्षर और स्पेस इसमें नहीं आते। इसलिए अंकों के कारण हुआ डाउनलोड यह साबित नहीं करता कि फ़ॉन्ट पूरा लेबल रेंडर कर सकता है। MDN बताता है कि किसी पात्र अक्षर से सामना होने पर पूरा फ़ॉन्ट संसाधन डाउनलोड हो सकता है। MDN: unicode-range

यह स्वतंत्र JavaScript उदाहरण इस अंतर को दिखाता है। इसे बिना किसी सेटअप के ब्राउज़र कंसोल या Node.js में चलाएँ। दिखाए गए नमूने के लिए तयशुदा रेंज गणना चलाई गई थी।

const text = "Panel 204";
const rows = Array.from(text, character => {
  const value = character.codePointAt(0);
  return {
    character,
    codePoint: "U+" + value.toString(16).toUpperCase().padStart(4, "0"),
    inDeclaredRange: value >= 0x30 && value <= 0x39
  };
});

console.table(rows);

अगर रेंज में ज़रूरी अक्षर शामिल नहीं हैं, तो गलत डिस्क्रिप्टर ठीक करें या ऐसा सबसेट दें जिसमें वे अक्षर हों। नतीजा जाँचते समय वही मूल विफल टेक्स्ट रखें। यह न मानें कि स्ट्रिंग पर इटरेशन करना शेपिंग की जाँच है: संयुक्त अनुक्रमों के लिए क्लस्टर हैंडलिंग ज़रूरी है, और मानक जहाँ आवश्यक हो, शेपिंग जानकारी को ध्यान में रखता है। रेंडर हुए आउटपुट की तुलना करते समय अनुक्रमों को पूरा रखें। W3C: Font matching and cluster matching

क्या फ़ॉन्ट अपना डिस्प्ले विंडो चूक गया?

अगर फ़ैमिली और कवरेज सही लगते हैं, तो font-display जाँचें। optional में ब्लॉक अवधि बेहद छोटी और स्वैप अवधि नहीं होती। fallback में स्वैप अवधि छोटी होती है। इसलिए, लागू विंडो के बाद आने वाला संसाधन उस पेज लोड में फ़ॉलबैक टेक्स्ट को दिखाई देता छोड़ सकता है। swap अपनी शुरुआती ब्लॉक अवधि के बाद असीमित स्वैप अवधि की अनुमति देता है। MDN: font-display

नियंत्रित निदान के लिए, सर्व की गई स्टाइलशीट में प्रभावित नियम को अस्थायी रूप से font-display: swap में बदलें और शुरुआती लोड की वही परिस्थितियाँ दोहराएँ। अगर लोड होने के बाद फ़ेस अब दिखाई देता है, तो समय को संभावित कारण मानने का आधार मिलता है। सेटिंग बनाए रखने से पहले तय करें कि बाद में दिखने वाला यह बदलाव पेज के लिए ठीक है या नहीं। शुरुआती लोड और कैश्ड रीलोड, दोनों दोहराएँ; केवल कैश्ड नतीजा संसाधन आने के मूल समय को फिर से नहीं दिखाता।

लाइब्रेरी या कैनवस टेक्स्ट ड्रॉ करे, तो क्या बदलता है?

अगर पेज पहले से Font Face Observer इस्तेमाल करता है, तो देखी जा रही फ़ैमिली और उसके weight, style, और stretch विकल्प जाँचें। इसके दस्तावेज़ इसे लोडर और मॉनिटर बताते हैं; इसमें सामान्य @font-face नियम ज़रूरी हैं, और अगर फ़ॉन्ट में इसके डिफ़ॉल्ट परीक्षण अक्षर न हों, तो कस्टम परीक्षण स्ट्रिंग देना ज़रूरी है। इसका डिफ़ॉल्ट टाइमआउट तीन सेकंड है। ऑब्ज़र्वर का टाइमआउट और ब्राउज़र की font-display विंडो अलग-अलग स्थितियाँ हैं। Font Face Observer documentation

निदान के आधार पर, ऑब्ज़र्वर का सफलता संदेश मिलने के बाद लक्ष्य एलिमेंट जाँचें। किसी एक फ़ेस की उपलब्धता पर नज़र रखने से यह साबित नहीं होता कि एलिमेंट की लागू CSS उसे माँगती है। जब अनुत्तरित सवाल यह हो कि किस फ़ेस ने रेंडर किया, तब एक और लोडर लगाने से बहुत मदद नहीं मिलती।

कैनवस एक अलग ड्रॉइंग सीमा प्रस्तुत करता है। उसके ड्रॉइंग संदर्भ की अपनी font सेटिंग होती है, जिसकी शुरुआती वैल्यू 10px sans-serif है; अमान्य असाइनमेंट को अनदेखा किया जाता है। इसलिए, कैनवस एलिमेंट पर CSS फ़ैमिली सेट करना इस बात का पर्याप्त सबूत नहीं है कि संदर्भ कौन-सा फ़ॉन्ट इस्तेमाल करेगा। ड्रॉइंग संदर्भ को दी गई वैल्यू और लोडिंग तथा ड्रॉइंग ऑपरेशन का क्रम जाँचें। WHATWG: Canvas text styles

कैनवस टेक्स्ट के लिए, अपेक्षित रजिस्टर हुए फ़ेस के लोड होने तक प्रतीक्षा करें, संदर्भ का फ़ॉन्ट सेट करें, फिर ऐप्लिकेशन की सामान्य ड्रॉइंग रूटीन से प्रभावित दृश्य दोबारा ड्रॉ करें। फ़ॉन्ट आने पर पहले से पेंट किए गए पिक्सेल को नया टाइपफ़ेस नहीं मिलता। कैनवस टेक्स्ट की तैयारी में एक काल्पनिक अनंत-चौड़ाई वाली लाइन बॉक्स भी इस्तेमाल होती है, इसलिए कैनवस का सफल परीक्षण यह साबित नहीं करता कि सीमित वेबपेज लेबल उसी तरह रैप होगा। WHATWG: Text preparation and drawing text

मरम्मत की पुष्टि कैसे करें?

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

तब पूरा करें जब आप समझा सकें कि फ़ॉन्ट इस्तेमाल क्यों नहीं हुआ और प्रभावित टेक्स्ट पर अपेक्षित नतीजा दिखा सकें। फ़ैमिली की घोषणा ठीक करना, सही सबसेट देना, फ़ेस रजिस्टर करना, उपयुक्त डिस्प्ले नीति चुनना या समय पर दोबारा ड्रॉ करना—हर उपाय एक अलग सीमा की समस्या सुलझाता है। अपने अवलोकनों से समर्थित उपाय चुनें।

स्रोत