आप fonts को गलत तरीके से load कर रहे हैं (और इससे performance खराब हो रही है)

 (jonoalderson.com)
30 पॉइंट द्वारा GN⁺ 2025-08-30 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Web fonts वेबसाइट के visual elements का अहम हिस्सा हैं, जो brand और user experience को आकार देते हैं, और performance तथा accessibility पर सीधे असर डालते हैं
  • गलत font loading तरीके FOUT (unstyled text का flash) या FOIT (invisible text का flash) जैसी समस्याएँ पैदा करते हैं, जिनका Core Web Vitals पर नकारात्मक प्रभाव पड़ता है
  • WOFF2 एक आधुनिक और efficient font format है, जिसे अधिकांश आधुनिक browsers support करते हैं, और अनावश्यक legacy formats हटाकर performance बेहतर की जा सकती है
  • Font subsetting और preload रणनीतियाँ अनावश्यक data transfer कम करने और page loading speed बढ़ाने के लिए आवश्यक हैं
  • System font stack और CSS descriptors का उपयोग करके font loading के दौरान layout shift (CLS) को न्यूनतम किया जा सकता है और स्थिर user experience दिया जा सकता है

Web fonts का संक्षिप्त इतिहास

Web fonts web design और user experience के मुख्य तत्व हैं, लेकिन उनकी अहमियत के बावजूद बहुत से लोग अब भी उन्हें गलत तरीके से इस्तेमाल करते हैं। नीचे web fonts के विकास का संक्षिप्त क्रम दिया गया है।

  • "Web safe" युग

    • शुरुआती web में सिर्फ Arial, Times New Roman जैसे web safe fonts का उपयोग संभव था, और custom fonts को images से बदल दिया जाता था
    • हर browser में font rendering अलग होने से consistent design बनाना कठिन था

  • @font-face से पहले के hacks: sIFR और Cufón

    • sIFR: Flash का उपयोग करके text को dynamically render किया जाता था, लेकिन यह भारी था और accessibility कमजोर थी
    • Cufón: JavaScript के जरिए fonts को vector graphics में बदलकर embed किया जाता था, लेकिन यह धीमा था और accessibility की समस्या बनी रहती थी

  • @font-face का आगमन

    • @font-face ने CSS के जरिए custom fonts embed करना संभव बनाया, लेकिन अलग-अलग browsers को अलग formats (EOT, SVG fonts, TTF/OTF) चाहिए होते थे, जिससे जटिलता बढ़ गई
    • font licensing की समस्याएँ और अवैध copying आम थीं

  • Commercial services: Typekit और अन्य

    • Typekit (अब Adobe Fonts) एक subscription-based service थी, जिसने licensing और compatibility की समस्याएँ हल कीं, और JavaScript snippet के जरिए fonts उपलब्ध कराए
    • third-party scripts पर निर्भर यह pattern आज तक जारी है

  • Compatibility hacks और workaround

    • कई formats host करने पड़ते थे, या FOUT और FOIT हल करने के लिए JavaScript fixes की ज़रूरत होती थी
    • glyph की कमी पूरी करने के लिए icon fonts का उपयोग करने की कोशिश भी हुई

  • Google Fonts और "free fonts" boom

    • Google Fonts ने free open-license fonts के जरिए font loading को आसान बनाया, लेकिन GDPR violation और धीमी loading speed जैसी नई समस्याएँ भी पैदा कीं
    • licensing restrictions वाले commercial fonts के विपरीत, Google Fonts को अपेक्षाकृत स्वतंत्र रूप से optimize किया जा सकता था

Fonts कैसे काम करते हैं (बुनियाद)

Fonts सिर्फ एक साधारण CSS setting नहीं हैं, बल्कि browser की rendering pipeline में गहराई से शामिल एक जटिल तत्व हैं।

  • Formats: TTF से WOFF2 तक

    • TTF/OTF: desktop-केंद्रित भारी formats
    • WOFF2: Brotli compression का उपयोग करने वाला आधुनिक और efficient webfont format, जो अधिकांश projects के लिए उपयुक्त है

  • Rendering pipeline

    • font loading में registration, style resolution, font matching, glyph coverage, request, display phase, और decoding एवं shaping जैसे चरण शामिल होते हैं
    • font-display settings (swap, block, fallback, optional) यह तय करती हैं कि text कैसे दिखेगा

  • Metrics

    • Ascent, descent, line gap जैसे metrics font की ऊँचाई और spacing तय करते हैं
    • font बदलने पर metrics mismatch से layout shift (CLS) हो सकता है

  • Synthetic styles

    • जब browser को मांगा गया font weight या style नहीं मिलता, तो वह नकली bold या italic बना देता है, जिससे quality घटती है
    • font-synthesis: none; से नकली styles बनने से रोका जा सकता है

  • Glyph coverage

    • fonts में हर character शामिल नहीं होता, और missing glyphs को fallback fonts से render किया जाता है, जिससे consistency की समस्या होती है
    • unicode-range का उपयोग करके सिर्फ ज़रूरी glyphs ही load किए जा सकते हैं

Performance और strategy की बुनियाद

Fonts critical rendering path को प्रभावित करते हैं, और गलत प्रबंधन से performance खराब हो सकती है।

  • File size

    • एक single font family का आकार 800KB तक हो सकता है, और अनावश्यक glyphs शामिल होने से data waste होता है
    • Font subsetting से सिर्फ ज़रूरी glyphs भेजकर size optimize किया जा सकता है

  • Layout shift

    • fallback font और custom font के metrics difference की वजह से CLS होता है
    • size-adjust, ascent-override जैसे CSS descriptors से layout को स्थिर किया जा सकता है

  • आधुनिक CSS descriptors

    • font-display: swap; fallback font को तुरंत दिखाकर stable rendering देता है
    • unicode-range से किसी खास script के लिए ज़रूरी glyphs ही load किए जा सकते हैं

Variable fonts: वादा बनाम हकीकत

Variable fonts एक ही file में कई styles और weights को support करके efficiency बढ़ा सकते हैं।

  • वादा

    • कई static files को एक single file में समेटना
    • viewport size के हिसाब से dynamically adjust होने वाली responsive typography

  • हकीकत

    • अगर आवश्यक weights कम हों, तो variable font उलटे भारी पड़ सकता है
    • कुछ axes पर browser support सीमित है, और licensing issues भी आ सकते हैं

  • Performance strategy

    • सिर्फ आवश्यक axes चुनें, और script-wise subsetting से file size optimize करें
    • static fonts की तुलना में वास्तव में लाभ है या नहीं, यह जाँचें

  • CSS में variable font axes उपयोग का उदाहरण

    @font-face {  
  font-family: "Acme Variable";  
  src: url("/fonts/acme-variable.woff2") format("woff2-variations");  
  font-weight: 100 900;  
  font-display: swap;  
}  
h1 {  
  font-family: "Acme Variable", system-ui, sans-serif;  
  font-weight: 700;  
}

System stack और CDN

बिना custom fonts के system font stack का उपयोग करने से तुरंत loading और परिचित अनुभव मिलता है।

  • System font stack

    • -apple-system, Segoe UI जैसे fonts वाला stack सभी platforms पर consistency बनाए रख सकता है
    • emoji rendering में system fonts बेहतर performance देते हैं

  • CDN और third-party hosting

    • Google Fonts data leakage की वजह से GDPR violation का कारण बन सकता है
    • Self-hosting से DNS lookup latency कम होती है और caching पर नियंत्रण मिलता है

Fallback fonts और matching

Fallback fonts custom font load होने से पहले user experience तय करते हैं, इसलिए उनका design स्थिर होना चाहिए।

  • Fallback font design

    • x-height और character width को custom font के समान रखकर CLS कम किया जा सकता है
    • font-size-adjust से fallback font का आकार समायोजित किया जा सकता है

  • Custom और fallback font matching

    • समान proportions वाले fonts चुनें, और metric adjustment से layout stability सुनिश्चित करें
    • platform-specific rendering differences को ध्यान में रखते हुए stability और readability को प्राथमिकता दें

Preloading और loading strategy

Font delivery strategy का user experience पर बड़ा प्रभाव पड़ता है।

  • Loading outcomes

    • FOIT धीमे network पर text के invisible रहने की समस्या पैदा करता है
    • font-display: swap; एक सुरक्षित default है, जो fallback font को तुरंत दिखाता है

  • Preloading

    • <link rel="preload" as="font"> का उपयोग करके font loading तुरंत शुरू की जा सकती है
    • CORS headers और exact URL matching आवश्यक हैं

  • Early Hints (HTTP 103)

    • server HTML response से पहले fonts fetch करने का निर्देश देकर loading time कम कर सकता है
    • bandwidth waste से बचने के लिए सिर्फ critical fonts को hint करें

  • Font Loading API

    • Font Loading API dynamic sites में font loading पर अधिक सूक्ष्म नियंत्रण देता है

File formats: WOFF2, WOFF, TTF और legacy बोझ

WOFF2 आधुनिक web के लिए सबसे efficient format है, और अधिकांश मामलों में एक ही format काफ़ी है।

  • सिर्फ WOFF2 का उपयोग करें और अनावश्यक formats हटाएँ
  • base64 embedding से बचें, क्योंकि यह caching में बाधा डालता है

Icon fonts: Font Awesome और बड़ी गलती

Icon fonts accessibility और performance समस्याओं के कारण आधुनिक web के लिए उपयुक्त नहीं हैं।

  • SVG icons अधिक semantic, flexible हैं, और CSS से style किए जा सकते हैं
  • अगर existing icon fonts उपयोग में हैं, तो subsetting और SVG migration की योजना बनानी चाहिए

Latin से आगे: non-Latin scripts, RTL languages, emoji

Non-Latin scripts और RTL languages को जटिल shaping और metrics की ज़रूरत होती है।

  • Subsetting करते समय script-specific विशेषताओं का ध्यान रखें ताकि rendering errors न हों
  • Emoji के लिए system fonts का उपयोग consistency और performance बेहतर करता है

Web fonts का भविष्य: बदलते standards और आधुनिक जोखिम

नई CSS properties, variable fonts, और color fonts web typography को आगे बढ़ा रहे हैं।

  • Font Loading API और Early Hints SPA में होने वाली delays को कम करने में मदद करते हैं
  • fonts को infrastructure की तरह समझना चाहिए, और performance व accessibility को प्राथमिकता देनी चाहिए

Tools और audit

Font performance को DevTools, Lighthouse, Glyphhanger जैसे tools से मापा जा सकता है।

  • Font subsetting tools से अनावश्यक glyphs हटाएँ
  • Font Style Matcher से fallback font metrics adjust करें

Fonts को सही तरीके से संभालने का घोषणापत्र

Fonts सिर्फ सजावट नहीं, बल्कि user experience और performance का मुख्य हिस्सा हैं।

  • System first: मज़बूत system font stack से शुरुआत करें
  • Intelligent subsetting: सिर्फ आवश्यक glyphs भेजें
  • WOFF2 only: legacy formats हटाएँ
  • Global scripts का सम्मान: अलग-अलग भाषाओं और emoji को support करें
  • Testing महत्वपूर्ण है: अलग-अलग networks और devices पर test करें

Fonts को content और brand दोनों की तरह देखें, और performance व accessibility के लिए सख्त प्रबंधन लागू करें

संबंधित पढ़ाई

1 टिप्पणियां

 
nemorize 2025-08-30

Cufón का नाम वाकई बहुत लंबे समय बाद सुनने को मिला है lol