FlowingDev

Web Fonts, आसान भाषा में: एक तेज़ वेब के लिए typography का वज़न कम करना

WOFF2 जैसे web font formats के fundamentals सीखें और जानें कि कैसे subsetting फालतू characters को हटाकर website की loading speed को गज़ब तरीके से बढ़ा देता है।

टूल आज़माएँ: Font Converter और Subsetter

एक लाइन में

Font subsetting और conversion बिल्कुल weekend ट्रिप की पैकिंग जैसा है: एक ऐसा suitcase जिसमें 6,000 characters (जैसे Cyrillic scripts और dingbats जो आप कभी यूज़ नहीं करेंगे) ठूंस कर ले जाने के बजाय, आप सिर्फ वही letters एक highly compressed, web-ready backpack में पैक करते हैं जिनकी आपको असल में ज़रूरत है।

यह कौन सी प्रॉब्लम सॉल्व करता है

अगर आप 2005 में websites बना रहे थे, तो आपकी typographic palette सच में एक hostage situation (किडनैपिंग) जैसी थी। आपके पास Arial, Times New Roman, Georgia, Verdana था, और अगर आप दुनिया को जलते हुए देखना चाहते थे, तो शायद Comic Sans भी था। ये "web-safe" fonts थे—मतलब हम बस उंगलियां क्रॉस करके दुआ करते थे कि ये user के operating system में पहले से installed हों।

फिर आई @font-face क्रांति (revolution)। अचानक, designers अपनी पसंद का कोई भी custom typeface embed कर सकते थे। वेब खूबसूरत तो हो गया, लेकिन यह बहुत ज़्यादा slow भी हो गया।

Standard desktop fonts (TrueType या OpenType) असल में print और universal language support के लिए डिज़ाइन किए गए हैं। एक .ttf फाइल में हज़ारों glyphs हो सकते हैं, जो English, Greek, Vietnamese, specialized math symbols, और ampersand (&) के बीसियों variations को सपोर्ट करते हैं। एक word processor के लिए तो यह मस्त चीज़ है, लेकिन एक ढीले-ढाले 3G connection पर web browser के लिए यह किसी तबाही से कम नहीं है। 400KB की font file डाउनलोड होना rendering को ब्लॉक कर देता है, जिससे खूंखार "Flash of Unstyled Text" (FOUT) या उससे भी बुरा "Flash of Invisible Text" (FOIT) देखने को मिलता है।

इस typographic मोटापे (obesity) को ठीक करने के लिए हमें दो चीज़ों की ज़रूरत थी:

  1. Better compression जो खास तौर पर वेब के लिए डिज़ाइन किया गया हो (इसीलिए WOFF और WOFF2 जैसे formats आए)।
  2. Subsetting, यानी हर उस character और language table की सर्जिकल स्ट्राइक (surgical removal) जिसकी किसी specific website को असल में कोई ज़रूरत ही नहीं है।

यह अंदर कैसे काम करता है (How it works under the hood)

हम fonts को कैसे छोटा (shrink) करते हैं, यह समझने के लिए आपको यह समझना होगा कि font file असल में होती क्या है। एक modern font (जैसे TTF या OTF) सिर्फ vector drawings का फोल्डर नहीं है। यह SFNT container format पर आधारित एक complex, binary database है।

Font का Anatomy

एक SFNT container के अंदर, data कुछ specific tables में organize होता है:

  • glyf या CFF: असली vector drawings (letters के curves और lines)।
  • cmap: Character map, जो एक Unicode point (जैसे 'A' के लिए U+0041) को glyf table की specific drawing से translate करता है।
  • GSUB / GPOS: Advanced OpenType features जैसे ligatures ('f' और 'i' को जोड़ना) और kerning (दो specific letters के बीच की spacing)।
  • name: Metadata जैसे font का नाम, copyright, और designer की info।

Subsetting का जादू

जब आप किसी font को subset करते हैं, तो एक parser इस SFNT container को खोलता है। आप उसे characters की एक लिस्ट देते हैं—मान लीजिए, सिर्फ बेसिक English alphabet, numbers और common punctuation।

Parser सिर्फ glyf table से unused vector drawings को डिलीट नहीं करता। उसे पूरे database को बड़ी बारीकी से rebuild करना पड़ता है। वह छोड़े गए Unicode points को हटाने के लिए cmap को दोबारा लिखता है। वह GSUB और GPOS tables को खंगालता है, उन letters के kerning pairs को हटाता है जो अब मौजूद ही नहीं हैं, ताकि file ब्रेक न हो। अंत में, वह file headers के लिए memory offsets को recalculate करता है।

एक standard 300KB का font सिर्फ बेसिक Latin characters तक subset करने पर आसानी से 15KB तक गिर सकता है।

Format Wars: WOFF और WOFF2

एक बार font subset हो जाए, तो बारी आती है उसे compress करने की।

Format Compression Tech नतीजा (The Verdict)
TTF / OTF None (Usually) Desktop design apps के लिए बढ़िया। Web delivery के लिए एकदम बकवास (Terrible)।
WOFF Zlib Original Web Open Font Format. सही है, पर अब outdated हो चुका है।
WOFF2 Brotli Modern standard. Font tables को compress करने से पहले transform करता है।

WOFF2 web fonts का निर्विवाद राजा (undisputed king) है। यह सिर्फ एक TTF को लेकर zip नहीं करता। WOFF2 फिजिकली SFNT tables को transform करता है—खास तौर पर एक जैसे data types को साथ में group करके—ताकि इसका underlying Brotli compression algorithm लंबे repeating patterns को ढूंढ सके। इसका नतीजा? WOFF1 के मुकाबले file sizes 30% तक छोटे, और जब इसे subsetting के साथ मिला दिया जाए, तो original TTF से 95% तक छोटे हो सकते हैं।

इसे CSS के साथ जोड़ना

जब आपके पास आपकी highly compressed, subsetted WOFF2 file आ जाती है, तो आप CSS का यूज़ करके browser को इसके बारे में बताते हैं। यहां unicode-range property बहुत क्रूशियल (crucial) है। यह browser से कहती है, "इस फाइल को सिर्फ तभी डाउनलोड करो जब पेज का कोई character असल में इस range से मैच करे।"

@font-face {
  font-family: 'MyCustomFont';
  /* Highly compressed WOFF2 format को लोड करें */
  src: url('mycustomfont-subset.woff2') format('woff2');
  /* डाउनलोड सिर्फ तभी ट्रिगर करें जब पेज basic Latin characters यूज़ कर रहा हो */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
  font-display: swap;
}

असल दुनिया की कहानियां (Real-world stories)

सिर्फ एक Ampersand की तबाही

एक boutique design agency एक high-end restaurant के लिए landing page बना रही थी। उसकी headline typography गज़ब लग रही थी, क्योंकि उन्होंने restaurant के नाम "Salt & Ash" में सिर्फ ampersand (&) के लिए एक बहुत ही सुंदर, ornate cursive font यूज़ किया था।

लेकिन, Lighthouse performance scores लाल रंग में डूबे हुए थे (deep in the red)। Developers को रियलाइज़ हुआ कि वो users को सिर्फ एक character render करने के लिए 250KB की TTF file डाउनलोड करने पर मजबूर कर रहे हैं। Font को एक subsetter से गुज़ार कर और सिर्फ & character (Unicode U+0026) को extract करके, उन्होंने एक WOFF2 फाइल generate की जिसका वज़न हंसा देने वाला सिर्फ 800 bytes था। सबक: Decorative drop-caps, icons, या single characters के लिए कभी भी पूरी font family लोड मत करो। Aggressively subset करो।

मल्टी-लिंगुअल मेगाबाइट

एक SaaS कंपनी ने अपनी marketing site को Japan और South Korea के users के लिए localize किया। Branding को एक जैसा रखने के लिए, उन्होंने एक बहुत ही बढ़िया CJK (Chinese, Japanese, Korean) font embed किया। CJK fonts कुख्यात (notoriously) रूप से भारी होते हैं क्योंकि उनमें हज़ारों ideograms होते हैं। वह फाइल 4.5MB की थी।

अचानक, US और Europe में उनके users को text देखने के लिए कई seconds का इंतज़ार करना पड़ रहा था, क्योंकि browser 4.5MB के ऐसे Asian characters डाउनलोड कर रहा था जिन्हें वे कभी देखते ही नहीं। Engineering team ने master font को छोटे-छोटे "chunks" (एक WOFF2 Basic Latin के लिए, एक Hiragana/Katakana के लिए, आदि) में subset करके और strict unicode-range descriptors के साथ @font-face blocks में deploy करके इसे फिक्स किया। अब browsers English users के लिए सिर्फ 15KB का Latin chunk ही डाउनलोड करते थे। सबक: User की असली language needs के हिसाब से typographic chunks को dynamically सर्व करने के लिए subsetting और unicode-range का यूज़ करें।

आम गलतियां और जाल (Common mistakes and traps)

  • Spacebar को गलती से डिलीट करना: जब developers उन characters को टाइप करते हैं जिन्हें वे subset करना चाहते हैं (जैसे, abcdefghijklmnopqrstuvwxyz), तो वे अक्सर space character (U+0020) को डालना भूल जाते हैं। इसके बिना, जब भी शब्दों के बीच खाली जगह होगी, आपका बड़ी मेहनत से बनाया गया custom font वापस Arial में बदल (fallback) जाएगा, जिससे एक डरावना ransom-note (फिरौती की चिट्ठी) वाला लुक बन जाएगा।
  • बिना वजह legacy formats सर्व करना: बहुत से developers अभी भी "just to be safe" (सुरक्षा के लिए) अपने CSS stacks में EOT, TTF और SVG fonts जनरेट और सर्व करते हैं। ऐसा मत करो। WOFF2 को दुनियाभर में 97% से ज़्यादा browsers सपोर्ट करते हैं। WOFF2 सर्व करो, शायद बहुत पुराने (ancient) browsers के लिए fallback के तौर पर WOFF दे दो, और वहीं रुक जाओ।
  • ज़रूरी OpenType features को हटाना (Strip करना): Aggressive subsetting tools कभी-कभी कुछ extra kilobytes बचाने के लिए GSUB और GPOS tables को हटाने का ऑफर देते हैं। अगर आपका font complex ligatures (-> को एक तीर में बदलना) पर निर्भर करता है या बेकार न दिखने के लिए kerning पर heavily डिपेंड करता है, तो इन tables को हटाने से आपकी typography बर्बाद हो जाएगी।
  • font-display: swap भूल जाना: एक छोटा सा 12KB का subsetted WOFF2 भी डाउनलोड होने में कुछ milliseconds लेता है। अगर आप अपने CSS में font-display: swap नहीं लगाते, तो modern browsers आपके text को तब तक पूरी तरह से छुपाए रखेंगे जब तक font आ नहीं जाता। जब तक custom font रास्ते में है, अपने users को पढ़ने के लिए system text दें।

यह आपके रडार पर क्यों होना चाहिए

जब बात Web Vitals को बर्बाद करने की आती है, तो Web fonts ऐतिहासिक रूप से सबसे बड़े अपराधियों (worst offenders) में से एक रहे हैं। अगर आपको Largest Contentful Paint (LCP) या Cumulative Layout Shift (CLS) की परवाह है, तो आपको font delivery की परवाह करनी ही होगी।

जिस पल आपको किसी designer से .ttf या .otf फाइल मिलती है या आप foundry से उसे डाउनलोड करते हैं, उसी पल आपको font subsetting और conversion के बारे में सोचना चाहिए। वेब पर raw desktop fonts सर्व करना बिल्कुल वैसा ही है जैसे WebP के बजाय एक raw, uncompressed 10MB bitmap image सर्व करना।

WOFF2 में convert करके और उन हज़ारों glyphs को हटाकर (strip करके) जिनका आप यूज़ नहीं कर रहे हैं, आप bandwidth costs घटाते हैं, अपनी application के carbon footprint को कम करते हैं, और यह पक्का करते हैं कि user के आपके link पर क्लिक करते ही आपकी site असल में readable (पढ़ने लायक) हो।

और गहराई में जाएं (Go deeper)

  • MDN Web Docs: @font-face - Custom fonts को कैसे implement करें और CSS में unicode-range का सही इस्तेमाल कैसे करें, इस पर ये absolute bible है।
  • W3C WOFF2 Specification - Official technical spec जो डिटेल में बताता है कि कैसे WOFF2 SFNT tables को transform और compress करता है।
  • RFC 7932: Brotli Compressed Data Format - उस compression algorithm का IETF documentation जो WOFF2 को उसके superpowers देता है।
  • Web.dev: Optimize WebFonts - Web font payload को कम करने और layout shifts को रोकने पर Google का authoritative गाइड।
  • Google Fonts Knowledge: What is a font? - SFNT table structure में एक deep dive और यह जानना कि हुड के नीचे (under the hood) glyphs कैसे स्टोर होते हैं।

थ्योरी हो गई। अब हाथ आज़माइए — 100% आपके ब्राउज़र में।

टूल आज़माएँ: Font Converter और Subsetter