हर रूट के लिए ब्राउज़र को करने वाला फ़ॉन्ट कार्य घटाएँ
होम पेज, कन्वर्ज़न पेज, लॉग-इन दृश्य, और अलग डिज़ाइन सिस्टम वाले टेम्पलेट्स पर cold-cache फ़ॉन्ट अनुरोधों का इन्वेंटरी बनाएं। फैमिली, वेट, स्टाइल, फ़ाइल, स्रोत, ट्रांसफर साइज़, और सेलेक्टर नोट करें। एक घोषित @font-face नियम अपने आप डाउनलोड ट्रिगर नहीं करता; ब्राउज़र आमतौर पर उस समय किसी फ़ेस को फ़ेच करता है जब वर्तमान लेआउट उसे उपयोग कर रहा होता है। इसलिए अनयूज़्ड ग्लोबल वेट्स और स्टाइल्स को पहले हटाना लाभदायक होता है।
जहाँ कस्टम टाइप वास्तविक ब्रांड मूल्य ले आती है, वहाँ उसे उपयोग करें—अक्सर डिस्प्ले हेडिंग्स में—और जहाँ डिज़ाइन अनुमति देता है, सामान्य बॉडी कॉपी के लिए सिस्टम स्टैक पर विचार करें। यह मानने की आवश्यकता नहीं कि वेरिएबल फ़ॉन्ट हमेशा छोटे होते हैं: यह कई स्टैटिक फाइलों को बदल सकता है पर एक स्टैटिक फेस की तुलना में बड़ा भी हो सकता है। रूट द्वारा वास्तव में अनुरोधित कंप्रेस्ड एसेट्स की तुलना करें।
ऐसी फैमिलियों, वेट्स, इटैलिक्स, और आइकन फ़ॉन्ट्स निकालें जिनका कोई परीक्षण-आधारित रूट-स्तरीय उपयोग नहीं है।
बिल्ड बदलने से पहले जाँचें कि लाइसेंस वेब डिलीवरी, सबसेटिंग, और सेल्फ‑होस्टिंग की अनुमति देता है।
आवश्यक पात्र न हटाते हुए WOFF2 और सबसेटिंग का उपयोग करें
आधुनिक‑ब्राउज़र बेसलाइन के लिए WOFF2 के साथ शुरू करें। W3C Recommendation WOFF2 को बेहतर कंप्रेशन और तेज़ डीकंप्रेशन के लिए डिज़ाइन किए गए वेब‑फ़ॉन्ट पैकेज के रूप में वर्णित करता है और यह प्रमुख ब्राउज़रों में लागू है। किसी दस्तावेजीकृत लेगेसी‑ब्राउज़र आवश्यकता के लिए ही कोई अन्य फॉर्मैट रखें; अन्यथा अच्छी तरह डिजाइन किया गया फॉलबैक सुरक्षित कम्पैटिबिलिटी मार्ग है।
सबसेटिंग छोटे फ़ाइल बनाती है जिसमें चुने हुए ग्लाइफ़्स (glyphs) होते हैं। unicode-range सूचित कर सकता है कि ब्राउज़र टेक्स्ट से मेल खाते हुए प्रासंगिक फ़ाइल चुने। वास्तविक पृष्ठों और जिन भाषाओं का आप समर्थन करते हैं, उनसे subsets बनाएं—पंक्चुएशन, मुद्राएँ, नाम, कानूनी टेक्स्ट, और उपयोगकर्ता‑द्वारा दर्ज स्क्रिप्ट्स सहित। गुम ग्लाइफ़्स एक correctness समस्या हैं, स्वीकार्य बाइट‑बचत नहीं।
केवल अंग्रेज़ी डिज़ाइन सैम्पल नहीं—प्रतिनिधि स्थानीयकृत पृष्ठों और फॉर्म इनपुट का परीक्षण करें।
सुनिश्चित करें कि हर subset की unicode-range और weight/style रेंज तैनात फ़ाइल से मेल खाती हो।
फॉलबैक और font-display नीति को साथ में डिज़ाइन करें
फ़ॉलबैक फ़ॉन्ट वही है जो उपयोगकर्ता तब देखते हैं जब कस्टम फेस तैयार नहीं होता। इसे समान अनुपातों के लिए चुनें, फिर वास्तविक हेडिंग्स, मल्टी‑लाइन बटन, नेविगेशन, तालिकाएँ, फॉर्म, और लंबी स्थानीयकृत स्ट्रिंग्स की तुलना करें। अलग चौड़ाइयाँ रैपिंग बदलती हैं; अलग ascent, descent, या line‑gap ब्लॉक की ऊँचाई बदलता है। दोनों ही पहले से दिखाई दे रहे पेज कंटेंट को हिला सकते हैं।
font-display उस व्यवहार को परिभाषित करता है जब तक कोई फ़ेस अनुपलब्ध है। optional का ब्लॉक पीरियड बेहद छोटा होता है और कोई swap पीरियड नहीं होता, इसलिए यह बॉडी टेक्स्ट के लिए उपयुक्त हो सकता है जब पहले व्यू पर स्थिर फॉलबैक वरीयता हो। swap फॉलबैक को शीघ्र दिखाता है और बाद में वेब फ़ॉन्ट लागू कर सकता है, पर इसे केवल उन्हीं जगहों पर उपयोग करें जहाँ देरी से होने वाला रिप्लेसमेंट व्यवधानकारी रीफ़्लो नहीं करेगा। Block या fallback का उपयोग किसी परीक्षण-युक्त डिज़ाइन कारण से करें, न कि एक ग्लोबल डिफॉल्ट के रूप में। CSS size-adjust फॉलबैक के मेट्रिक्स को ट्यून करने में मदद कर सकता है, पर हर समर्थित स्क्रिप्ट और viewport को दृश्य रूप से सत्यापित करें।
भुगतान, रिकवरी, अकाउंट, सुरक्षा, या नेविगेशन टेक्स्ट को देर से आने वाले कस्टम फ़ॉन्ट पर निर्भर न बनाएं।
एक fallback अक्षर गलत अर्थ दे सकता है; इंटरफ़ेस प्रतीकों के लिए SVG आइकॉन्स आमतौर पर सुरक्षित हैं।
खोज बेहतर बनाएं, पर preload को संयमित रखें और डेटा‑फ्लो का मूल्यांकन करें
केवल एक बाहरी स्टाइलशीट में घोषित फ़ेस उस स्टाइलशीट के डाउनलोड और पार्स होने के बाद खोजे जा सकते हैं। मेंटेन करने योग्य early critical CSS आवश्यक घोषणा को पहले उजागर कर सकती है; फ़ॉन्ट बाइनरी को इनलाइन न करें, इससे दस्तावेज़ बड़ा हो जाता है। तीसरे‑पक्ष स्रोत के लिए preconnect कनेक्शन को पहले स्थापित कर सकता है। फ़ॉन्ट अनुरोध CORS संसाधन होते हैं, इसलिए क्रॉस‑ओरिजिन डिलीवरी और preloads को सही crossorigin हैंडलिंग की आवश्यकता होती है।
Preload एक प्राथमिकता ओवरराइड है, सार्वभौमिक गति स्विच नहीं। यह अन्य महत्वपूर्ण कार्यों के साथ प्रतिस्पर्धा कर सकता है और एक ऐसे रूट के लिए फ़ेस डाउनलोड कर सकता है जिसकी आवश्यकता नहीं है; यह unicode-range चयन को भी बायपास कर देता है। पहले लेट डिस्कवरी ठीक करें, फिर अधिकतम एक सिद्ध पहले‑व्यू फ़ाइल preload करें — सटीक URL, as=font, और crossorigin के साथ। Google Fonts कहता है कि API अनुरोधों में विज़िटर IP पता, अनुरोधित URL, HTTP हेडर्स, और referer शामिल होते हैं; यह भी कहता है कि इसका API कुकीज़ सेट या लॉग नहीं करता और न ही एकत्रित जानकारी को प्रोफाइल या लक्षित विज्ञापन के लिए उपयोग करता है। सेल्फ‑होस्टिंग उन लोड्स के लिए Google को डेटा प्राप्त करने से रोकता है। डिलीवरी, गोपनीयता नोटिस, क्षेत्राधिकार, अनुबंधों, और आवश्यकतानुसार पात्र सलाह का मूल्यांकन करें।
cold-cache ट्रेसेस की तुलना करें और पुष्टि करें कि preloaded फ़ाइल रूट पर उपयोग हो रही है।
कनेक्शन सेटअप, कैश और CDN क्षमता, एसेट मेंटेनेंस, और विज़िटर‑डेटा फ़्लो का वजन तौलें।
फ़ॉन्ट एसेट्स का वर्शनिंग करें और एक टेस्ट किया हुआ CSS फॉलबैक कॉन्फ़िगरेशन बनाए रखें।
रेंडर किए गए व्यवहार का परीक्षण करें और फ़ॉन्ट्स को एक लचीलापन‑निर्भरता के रूप में संचालित करें
cold cache के साथ, ब्राउज़र नेटवर्क टूल्स का उपयोग करके CSS‑to‑font अनुरोध चेन, समय, स्रोत, कैशिंग, और विफलताओं का निरीक्षण करें। इसे एक सीमित कनेक्शन पर दोहराएँ, फिर फ़ॉन्ट को थ्रॉटल या ब्लॉक करें। सफलता का मतलब है पठनीय टेक्स्ट, प्रयोग योग्य कंट्रोल्स, सटीक प्रतीक, और कस्टम फेस आने से पहले सुसंगत लेआउट। वास्तविकistic narrow और desktop लेआउट्स, लंबी स्ट्रिंग्स, त्रुटियाँ, सहमति कॉपी, कीमतें, और हर समर्थित स्क्रिप्ट का परीक्षण करें।
Chromium में, Performance पैनल में एक रीलोड रिकॉर्ड करें और Layout Shifts ट्रैक की जाँच करें; DevTools मूव किए गए एलिमेंट्स की पहचान कर सकते हैं और शिफ्ट को ऐनिमेट कर सकते हैं। फ़ॉन्ट लोडिंग एक जाना‑माना कारण है, पर एक मूव्ड एलिमेंट ज़रूरी नहीं कि रूट‑कारण ही हो, इसलिए ट्रेस को फ़ॉन्ट एप्लिकेशन के साथ सहसंबंधित करें। Layout Instability API केवल Chromium‑विशेष है, जो क्रॉस‑ब्राउज़र दृश्य जांचों को महत्वपूर्ण बनाता है। रिलीज़ समीक्षा में फ़ॉन्ट एसेट्स, CORS व्यवहार, कैश नीति, फॉलबैक्स, और रोलबैक शामिल करें। इच्छित डिग्रेडेड मोड पठनीय टेक्स्ट होना चाहिए, न कि खाली कंटेंट या टूटा नेविगेशन।
वॉर्म कैश प्रारम्भिक अनुरोध और रेंडरिंग समस्या को छिपा सकता है।
फ़ाइलों, CMS कॉपी, टेम्पलेट्स, प्रदाताओं, या CDN नियमों में परिवर्तन होने पर जाँच दोहराएँ।