फ़ॉन्ट को फटाफट डिलीवर करना बहुत ज़रूरी है: तेज़ फ़ॉन्ट की डिलीवरी का मतलब यह नहीं है कि टेक्स्ट, उपयोगकर्ता को जल्द ही दिखने लगेगा. साथ ही, इसका इस बात पर भी बड़ा असर पड़ता है कि क्या किसी फ़ॉन्ट की वजह से लेआउट शिफ़्ट होता है. अगर किसी फ़ॉन्ट की ज़रूरत से पहले उसे डिलीवर नहीं किया जा सकता, तो आम तौर पर फ़ॉन्ट को बदलते समय लेआउट शिफ़्ट किया जाता है. इस लेआउट शिफ़्ट का साइज़ इस आधार पर अलग-अलग हो सकता है कि फ़ॉलबैक फ़ॉन्ट, वेब फ़ॉन्ट से कितना मेल खाता है. इस तरह के काम करने के लिए, डेमो देखें और तेज़ कनेक्शन और धीमे कनेक्शन पर होने वाले लेआउट शिफ़्ट की तुलना करें.
नीचे दिए गए उदाहरण में, दो परफ़ॉर्मेंस तकनीकों को मिला-जुलाकर इस्तेमाल किया गया है, ताकि तीसरे पक्ष के फ़ॉन्ट को जल्द से जल्द लोड किया जा सके: इनलाइन फ़ॉन्ट के एलान का इस्तेमाल और preconnect रिसॉर्स हिंट का इस्तेमाल. हालांकि, इस कोड स्निपेट में बताया गया है कि
Google Fonts से फ़ॉन्ट कैसे लोड किए जाते हैं. हालांकि, ये तकनीकें
तीसरे पक्ष के फ़ॉन्ट की सेवा देने वाली दूसरी कंपनियों पर भी लागू होती हैं.
इनलाइन फ़ॉन्ट के बारे में एलान: मुख्य दस्तावेज़ में
font-familyएलान इनलाइन करने से, इस जानकारी को बाहरी स्टाइलशीट में शामिल करने के बजाय, ब्राउज़र यह तय कर सकता है कि पेज पर कौनसी फ़ॉन्ट फ़ाइलें इस्तेमाल की जाएंगी. इसके लिए, अलग से स्टाइलशीट फ़ाइल के डाउनलोड होने का इंतज़ार नहीं करना पड़ता. यह ज़रूरी है, क्योंकि आम तौर पर ब्राउज़र, फ़ॉन्ट की फ़ाइलों को तब तक डाउनलोड नहीं करते, जब तक कि उन्हें पता न हो कि पेज पर उनका इस्तेमाल किया जा रहा है. ज़्यादातर मामलों में, इनलाइन फ़ॉन्ट की जानकारी देने के लिए, फ़ॉन्ट लोड करने के लिएpreloadका इस्तेमाल करना बेहतर होता है.प्रीकनेक्ट: Google फ़ॉन्ट को लोड करने के लिए, हमारा सुझाव है कि आप
<link>टैग कोpreconnectरिसॉर्स संकेतों के साथ इस्तेमाल करें.preconnectसंसाधन संकेत, तीसरे पक्ष के ऑरिजिन के साथ शुरुआती कनेक्शन बनाते हैं. नीचे दिए गए कोड स्निपेट में, पहला रिसॉर्स हिंट, फ़ॉन्ट स्टाइलशीट डाउनलोड करने के लिए कनेक्शन सेट अप करता है; दूसरा रिसॉर्स हिंट, फ़ॉन्ट फ़ाइलें डाउनलोड करने के लिए कनेक्शन सेट अप करता है.
उदाहरण:
एचटीएमएल
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<style>
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Zen Tokyo Zoo', sans-serif;
font-size: 3em;
}
</style>
</head>