अधिकांश साइटों पर वेब फ़ॉन्ट्स अब भी प्रदर्शन सुधारने का सबसे आसान अवसर हैं

वह पैटर्न जो बार-बार दिखता है

अगर आप आज किसी भी दस production websites का audit करें, तो उनमें से अधिकतर पर आपको लगभग वही font स्थिति मिलेगी:

• Home page पर छह से दस font files लोड होती हैं
• वे सभी WOFF2 में हैं (अच्छा), लेकिन कोई font-display रणनीति नहीं है (खराब)
• कई weights और styles ऐसे हैं जो पेज पर कहीं इस्तेमाल नहीं होते
• पूरा stack किसी third-party domain से serve होता है (आमतौर पर Google Fonts), जिसके साथ DNS, TLS और privacy की लागत आती है
• कोई unicode-range subsetting नहीं है, इसलिए हर visitor Cyrillic और Greek glyphs भी डाउनलोड करता है, भले ही पेज English में हो

यह समस्या सिर्फ़ छोटी sites तक सीमित नहीं है। कई अच्छी funding वाली marketing pages भी पहले paragraph के paint होने से पहले 600 KB fonts लोड करती हैं। एक बार आप यह पैटर्न देखना शुरू कर दें, तो फिर इसे अनदेखा नहीं कर सकते।

समाधान कोई असामान्य चीज़ नहीं है। यह कुछ अच्छी तरह समझी गई techniques का समूह है, जो वर्षों से browsers में मौजूद हैं।

छह static fonts के बजाय एक variable font इस्तेमाल करें

अगर आप Inter Regular, Inter Medium, Inter SemiBold, Inter Bold और उनके italics लोड कर रहे हैं, तो आप ज़रूरत से लगभग छह गुना ज़्यादा bytes डाउनलोड कर रहे हैं। एक single Inter variable font पूरी weight axis (और कुछ builds में slant भी) को एक file में cover करता है, जो दो static weights से बस थोड़ा ही बड़ा होता है।

Browser support की कहानी वर्षों पहले तय हो चुकी है — variable fonts हर महत्वपूर्ण जगह काम करते हैं। जो झिझक बची है, वह ज़्यादातर static-font युग की आदत है।

एक व्यावहारिक नियम: हर script, हर family के लिए एक variable font file। Latin एक file में, Cyrillic दूसरी में, Greek तीसरी में, और उन्हें unicode-range के साथ conditionally load करें। बस इतना ही।

समझदारी से font-display सेट करें

जब custom font अभी load हो रहा हो, तो default behaviour होता है कुछ भी नहीं दिखाना — यानी invisible text — अधिकतम तीन seconds तक। यह सबसे खराब default है। Users को blank page दिखता है और वे मान लेते हैं कि कुछ टूटा हुआ है।

हर @font-face rule में यह जोड़ें:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap fallback font को तुरंत दिखाता है और custom font load होने पर उसे swap कर देता है। User millisecond zero से page पढ़ सकता है। Trade-off यह है कि swap होने पर थोड़ी layout shift हो सकती है, जिसे आप अगली technique से कम करते हैं।

अपने fallback metrics मिलाएँ

Flash of unstyled text तभी झटका देता है जब fallback और custom font के metrics बहुत अलग हों। Modern CSS इसे size-adjust, ascent-override और संबंधित properties से ठीक करता है:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Fallback metrics tune होने पर swap मुश्किल से महसूस होता है — custom font आने से पहले और बाद में शब्द लगभग वही horizontal space लेते हैं।

Google का --allow-fallback-font-metrics work अब baseline browser support में है, और tooling pipeline मौजूद है (fontaine library और समान tools) जो seconds में आपके लिए सही numbers निकाल देती है।

Self-host करें

Google Fonts सुविधाजनक और free है, लेकिन इसके दो वास्तविक costs हैं:

1. दूसरा TLS handshake। HTTP/3 और connection coalescing के साथ भी, extra origin शायद ही कभी free होता है।
2. Privacy और compliance का प्रश्न। कई European courts ने निर्णय दिया है कि fonts.gstatic.com से Google Fonts लोड करना personal data (IP address) को third party तक transmit करना है। Self-hosting इस प्रश्न को पूरी तरह हटा देती है।

Download-and-host pipeline यह है:

1. WOFF2 file लें (अगर variable build मौजूद हो तो वही)
2. उसे उन scripts तक subset करें जिनका आपके audience वास्तव में उपयोग करते हैं
3. उसे अपनी site के बाकी हिस्से की तरह same origin से serve करें, लंबे Cache-Control: max-age=31536000, immutable के साथ
4. सबसे critical weight को preload करें: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

यही पूरी pipeline है। Existing site के लिए इसमें एक afternoon लगता है, और आप लगभग कभी पीछे नहीं लौटते।

Custom fonts कब पूरी तरह छोड़ दें

यह स्पष्ट रूप से कहना ज़रूरी है: हर site को custom font की ज़रूरत नहीं होती। System font stack अब हर operating system पर सचमुच सुंदर है:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Weight सही है, metrics सही हैं, rendering device के लिए tuned है, और bytes-on-the-wire cost बिल्कुल zero है। Tools site, internal app, content को प्राथमिकता देने वाला portfolio, या slow networks पर users के लिए बनी किसी भी चीज़ के लिए system stack ही सही उत्तर है।

<!-- tool-cta:start -->

💡 इसे आज़माएँ: Webfont Generator का उपयोग करके अपनी TTF या OTF फ़ाइलों को उपयोग के लिए तैयार CSS के साथ आधुनिक WOFF2 में बदलें, जो पोस्ट द्वारा सुझाया गया फ़ॉर्मैट परिवर्तन है।

<!-- tool-cta:end -->

ईमानदार सारांश

एक typical small site के लिए, चार steps पूरी web-font performance कहानी cover कर देते हैं:

1. हर family हर script के लिए एक variable font
2. Matched fallback metrics के साथ font-display: swap
3. Long cache headers और critical weight के लिए preload के साथ Self-hosted
4. या fonts पूरी तरह छोड़ दें और system stack इस्तेमाल करें

यह एक बार कर लें, और आप home page से कई सौ kilobytes वापस पा लेते हैं, perceived performance में कुछ सौ milliseconds जीतते हैं, और साथ ही एक third-party dependency हटाते हैं। बहुत कम बदलावों का effort-to-payoff ratio इससे बेहतर होता है।