आपको इसके बारे में क्यों सोचना चाहिए?
फ़ॉन्ट अक्सर बड़ी फ़ाइलें होती हैं, जिन्हें लोड होने में समय लगता है. इससे निपटने के लिए, कुछ ब्राउज़र फ़ॉन्ट के लोड होने तक टेक्स्ट को छिपा देते हैं ("नहीं दिखने वाले टेक्स्ट का फ़्लैश").
सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) को, टेक्स्ट के रेंडर होने में देरी हो सकती है. अगर परफ़ॉर्मेंस को ऑप्टिमाइज़ किया जा रहा है, तो "इन दिखने वाले टेक्स्ट के फ़्लैश" (एफ़ओआईटी) से बचा जा सकता है. साथ ही, सिस्टम फ़ॉन्ट का इस्तेमाल करके उपयोगकर्ताओं को तुरंत कॉन्टेंट दिखाया जाना चाहिए. इससे, "बिना स्टाइल वाले टेक्स्ट का फ़्लैश" (FOUT) बनता है.
फ़ॉन्ट दिखाने के लिए ब्राउज़र डिफ़ॉल्ट रूप से उपलब्ध है
सामान्य ब्राउज़र के लिए, ये डिफ़ॉल्ट तौर पर फ़ॉन्ट लोड करने का तरीका बताया गया है:
| ब्राउज़र | अगर फ़ॉन्ट तैयार नहीं है, तो डिफ़ॉल्ट सेटिंग... |
|---|---|
| Chrome और Edge | टेक्स्ट को तीन सेकंड तक छिपाया जाएगा. अगर टेक्स्ट अब भी तैयार नहीं है, तो यह सिस्टम फ़ॉन्ट का इस्तेमाल तब तक करता है, जब तक फ़ॉन्ट तैयार नहीं होता. इसके बाद, वह फ़ॉन्ट को बदल देता है. |
| Firefox | टेक्स्ट को तीन सेकंड तक छिपाया जाएगा. अगर टेक्स्ट अब भी तैयार नहीं है, तो यह सिस्टम फ़ॉन्ट का इस्तेमाल तब तक करता है, जब तक फ़ॉन्ट तैयार नहीं होता. इसके बाद, वह फ़ॉन्ट को बदल देता है. |
| Safari | फ़ॉन्ट तैयार होने तक टेक्स्ट को छिपाता है. |
टेक्स्ट तुरंत दिखाएं
इस गाइड में, टेक्स्ट को जल्द से जल्द दिखाने के दो तरीके बताए गए हैं: पहला तरीका आसान है और यह ब्राउज़र के लिए अच्छी तरह से काम करता है. दूसरे तरीके में ज़्यादा जानकारी दी गई है, लेकिन इसमें आपको ज़्यादा विकल्प मिल सकते हैं. अपनी वेबसाइट के लिए सबसे अच्छा विकल्प आपकी ज़रूरतों के हिसाब से तय होता है.
पहला विकल्प: font-display का इस्तेमाल करना
font-display एक एपीआई है, जिसकी मदद से फ़ॉन्ट डिसप्ले की रणनीति तय की जाती है. swap ब्राउज़र को बताता है कि इस फ़ॉन्ट का इस्तेमाल करने वाले टेक्स्ट को सिस्टम फ़ॉन्ट का इस्तेमाल करके तुरंत दिखाया जाना चाहिए. कस्टम फ़ॉन्ट तैयार होने पर, सिस्टम फ़ॉन्ट को बदल दिया जाता है.
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
अगर कोई ब्राउज़र font-display के साथ काम नहीं करता, लेकिन सभी मॉडर्न ब्राउज़र पर यह सुविधा काम करती है, तो फ़ॉन्ट लोड करने के लिए, ब्राउज़र अपने डिफ़ॉल्ट तरीके का पालन करता है.
दूसरा विकल्प: कस्टम फ़ॉन्ट लोड होने तक इंतज़ार करें
थोड़ा और काम करने के बाद, ज़्यादा कस्टम तरीके को अपनाया जा सकता है.
इस तरीके के तीन हिस्से हैं:
- अपने सीएसएस को रीफ़ैक्टर करके, शुरुआती पेज लोड पर कस्टम फ़ॉन्ट का इस्तेमाल न करें, ताकि शुरुआत में कस्टम फ़ॉन्ट का इस्तेमाल न किया जा सके. इससे यह पक्का होता है कि ब्राउज़र, सिस्टम फ़ॉन्ट का इस्तेमाल करके तुरंत टेक्स्ट दिखाए.
- सीएसएस फ़ॉन्ट लोडिंग एपीआई का इस्तेमाल करके, अपनी पसंद के मुताबिक फ़ॉन्ट लोड होने का पता लगाएं
- पसंद के मुताबिक फ़ॉन्ट इस्तेमाल करने के लिए, पेज की स्टाइल अपडेट करें.
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});
यह काम FontFaceObserver लाइब्रेरी की मदद से भी किया जा सकता है. कुछ लोगों को इसे इस्तेमाल करने में आसान एपीआई मिलती है.
इससे फ़ॉन्ट लोड करते समय कई और बातों का ध्यान रखना पड़ता है. उदाहरण के लिए, सभी फ़ॉन्ट एक साथ लोड किए जा सकते हैं. साथ ही, हर फ़ॉन्ट लोड होने पर कई लेआउट का इस्तेमाल नहीं किया जा सकता. इसके अलावा, साइटें उन उपयोगकर्ताओं के लिए फ़ॉन्ट लोड नहीं करने का विकल्प चुन सकती हैं जो धीमे कनेक्शन का इस्तेमाल करते हैं. इसके अलावा, वे डेटा सेव करने का विकल्प इस्तेमाल करने वाले लोगों के लिए भी फ़ॉन्ट लोड नहीं कर सकते.
पुष्टि करें
लाइटहाउस चलाकर देखें कि साइट, टेक्स्ट दिखाने के लिए font-display: swap का इस्तेमाल कर रही है या नहीं:
- DevTools खोलने के लिए, Control+Shift+J (या Mac पर Command+Option+J) दबाएं.
- Lighthouse टैब पर क्लिक करें.
- पक्का करें कि कैटगरी सूची में, परफ़ॉर्मेंस चेकबॉक्स को चुना गया हो.
- रिपोर्ट जनरेट करें बटन पर क्लिक करें.
पुष्टि करें कि पक्का करें कि वेबफ़ॉन्ट लोड होने के दौरान टेक्स्ट दिखता रहे ऑडिट पास हो रहा है.