खुद से होस्ट किए जाने वाले फ़ॉन्ट ऐसी फ़ॉन्ट फ़ाइलें होती हैं जो आपके सर्वर पर उपलब्ध होती हैं. ये तीसरे पक्ष की फ़ॉन्ट देने वाली कंपनियों की नहीं होती, जैसे कि Google फ़ॉन्ट.
फ़ॉन्ट को फटाफट डिलीवर करना बहुत ज़रूरी है: तेज़ फ़ॉन्ट की डिलीवरी का मतलब यह नहीं है कि टेक्स्ट, उपयोगकर्ता को जल्द ही दिखने लगेगा. साथ ही, इसका इस बात पर भी बड़ा असर पड़ता है कि क्या किसी फ़ॉन्ट की वजह से लेआउट शिफ़्ट होता है. अगर किसी फ़ॉन्ट की ज़रूरत से पहले उसे डिलीवर नहीं किया जा सकता, तो आम तौर पर फ़ॉन्ट को बदलते समय लेआउट शिफ़्ट किया जाता है. इस लेआउट शिफ़्ट का साइज़ इस आधार पर अलग-अलग हो सकता है कि फ़ॉलबैक फ़ॉन्ट, वेब फ़ॉन्ट से कितना मेल खाता है. इस तरह के काम करने के लिए, डेमो देखें और तेज़ कनेक्शन और धीमे कनेक्शन पर होने वाले लेआउट शिफ़्ट की तुलना करें.
नीचे दिए गए उदाहरण में, दो परफ़ॉर्मेंस तकनीकों को मिलाकर, खुद से होस्ट किया गया फ़ॉन्ट जल्द से जल्द डिलीवर किया जा सकता है: इनलाइन फ़ॉन्ट के एलान का इस्तेमाल और WOFF2 फ़ॉन्ट फ़ॉर्मैट का इस्तेमाल.
इनलाइन फ़ॉन्ट के बारे में एलान: मुख्य दस्तावेज़ में
@font-faceऔरfont-familyजानकारी इनलाइन करने से, इस जानकारी को बाहरी स्टाइलशीट में शामिल करने के बजाय, ब्राउज़र यह तय कर सकता है कि पेज पर कौनसी फ़ॉन्ट फ़ाइलें इस्तेमाल की जाएंगी. इसके लिए, अलग से स्टाइलशीट फ़ाइल डाउनलोड होने का इंतज़ार नहीं करना पड़ता. यह ज़रूरी है, क्योंकि आम तौर पर ब्राउज़र, फ़ॉन्ट की फ़ाइलों को तब तक डाउनलोड नहीं करते, जब तक कि उन्हें पता न हो कि पेज पर उनका इस्तेमाल किया जा रहा है. ज़्यादातर मामलों में, इनलाइन फ़ॉन्ट की जानकारी देने के लिए, फ़ॉन्ट लोड करने के लिएpreloadका इस्तेमाल करना बेहतर होता है.WOFF2: मॉडर्न फ़ॉन्ट फ़ॉन्ट में, WOFF2 सबसे नया है और यह सबसे ज़्यादा ब्राउज़र पर काम करता है. साथ ही, यह सबसे अच्छे तरीके से कंप्रेस करने की सुविधा देता है. यह Brotli का इस्तेमाल करता है, इसलिए WOFF2, WOFF की तुलना में 30% बेहतर तरीके से कंप्रेस करता है.
परफ़ॉर्मेंस को और बेहतर बनाने के लिए, फ़ॉन्ट सबसेटिंग का इस्तेमाल करें. फ़ॉन्ट फ़ाइल को छोटे सबसेट में बांटने का तरीका फ़ॉन्ट सब-सेटिंग है. आम तौर पर, इस्तेमाल न किए गए ग्लिफ़ को हटाने के मकसद से ऐसा किया जाता है. इससे किसी फ़ॉन्ट का फ़ाइल साइज़ काफ़ी कम हो सकता है. फ़ॉन्ट के सबसेट बनाने के टूल में fontkit, सबफ़ॉन्ट, और glyphhener शामिल हैं.
खुद से होस्ट किए जाने वाले फ़ॉन्ट इस्तेमाल करने के सबसे सही तरीकों के बारे में ज़्यादा जानने के लिए, सेल्फ़-होस्ट किए गए फ़ॉन्ट इस्तेमाल करना देखें.
उदाहरण:
एचटीएमएल
<head>
<style>
@font-face {
font-family: 'Google Sans';
src: url("Google Sans.woff2") format('woff2');
font-display: swap;
}
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Google Sans', sans-serif;
font-size: 3em;
}
</style>
</head>