← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 11 of 20

HTML वेब फॉन्ट्स

हर website की अपनी एक personality होती है, और इस personality का बड़ा हिस्सा उसकी typography से आता है। Web fonts आपको अपनी site पर custom typefaces इस्तेमाल करने देते हैं, बजाय इसके कि आप सिर्फ visitor के device पर पहले से installed मुट्ठी भर fonts पर निर्भर रहें। जब कोई browser आपका page लोड करता है, तो वह font file को ठीक उसी तरह download करता है जैसे किसी image को करता है, फिर उसे आपके text को render करने के लिए इस्तेमाल करता है। इसका मतलब है कि एक देश का reader और दूसरे continent का reader बिल्कुल एक जैसा typeface देखेंगे, भले ही किसी के पास भी वह locally installed न हो। Web fonts ही brands को हर जगह अपनी site का consistent look बनाए रखने देते हैं, चाहे उसे कोई भी device या operating system खोले।

In this page:

  1. वेब फॉन्ट्स क्या हैं?
  2. @font-face से एक कस्टम फॉन्ट लोड करना
  3. फॉन्ट फॉर्मेट्स और फॉलबैक्स देना
  4. font-display से फॉन्ट लोडिंग कंट्रोल करना
  5. परफॉर्मेंस के लिए वेब फॉन्ट्स ऑप्टिमाइज़ करना
Syntax
markup 
<style>
  @font-face {
    font-family: "FontName";
    src: url("font-file.woff2") format("woff2");
  }
  body {
    font-family: "FontName", fallback-font;
  }
</style>

वेब फॉन्ट्स क्या हैं?

web fonts typeface files हैं जिन्हें browser network से download करके page के text पर लागू करता है, इसके बजाय कि वह visitor के device पर पहले से installed fonts पर निर्भर रहे। इससे designers ऐसी distinctive typography इस्तेमाल कर सकते हैं जो दुनिया में हर visitor के लिए एक जैसी दिखे।

Google Fonts सबसे लोकप्रिय free web font service है, जिसे दुनिया भर की लाखों websites Roboto जैसे तेज़, भरोसेमंद तरीके से hosted typefaces देने के लिए इस्तेमाल करती हैं।

Note: अपने page को तेज़ रखने के लिए, खासकर धीमे connection वाले visitors के लिए, कम संख्या में font weights चुनें।
Warning: कुछ free font services visitor requests को track करती हैं, इसलिए किसी font provider को link करने से पहले हमेशा उसकी privacy policy चेक करें।

उदाहरण: What Are Web Fonts?

markup 
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
<p style="font-family: 'Roboto', sans-serif;">Styled with a web font</p>

@font-face से एक कस्टम फॉन्ट लोड करना

@font-face rule आपको अपने खुद के server पर hosted font files की ओर पॉइंट करके अपनी खुद की font family define करने देता है। एक बार declare हो जाने पर, उस family name को किसी system font की तरह ही अपनी stylesheet में कहीं भी इस्तेमाल किया जा सकता है।

Note: जहाँ संभव हो अपनी खुद की font files serve करें, ताकि आपका page किसी third-party service के online रहने पर निर्भर न रहे।
Warning: अगर font file path गलत है, तो browser बिना कोई visible error दिखाए चुपचाप stack के अगले font पर fallback हो जाता है।

उदाहरण: Loading a Custom Font with @font-face

markup 
<style>
  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2');
  }
  p {
    font-family: 'MyFont', sans-serif;
  }
</style>

फॉन्ट फॉर्मेट्स और फॉलबैक्स देना

हर browser एक जैसे font formats support नहीं करता, इसलिए एक ही @font-face rule के अंदर कई formats लिस्ट करना और अपनी font-family list को हमेशा sans-serif या serif जैसे generic fallback के साथ खत्म करना अच्छी practice है।

Note: WOFF2 को सबसे पहले लिस्ट करें, क्योंकि यह सबसे अच्छा compression देता है, और पुराने formats को fallback के रूप में काम करने दें।
Warning: generic fallback family छोड़ने से, अगर लिस्ट किया हर font लोड होने में असफल हो जाए, तो text unreadable रह सकता है।

उदाहरण: Providing Font Formats and Fallbacks

markup 
<style>
  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff');
  }
  body {
    font-family: 'MyFont', sans-serif;
  }
</style>

font-display से फॉन्ट लोडिंग कंट्रोल करना

font-display property यह control करती है कि custom font अभी भी download हो रहा हो तो browser text को कैसे handle करे, जिससे आप तुरंत fallback text दिखाने या custom font के लिए थोड़ा इंतज़ार करने के बीच चुनाव कर सकते हैं।

Note: font-display: swap इस्तेमाल करें ताकि visitors invisible text देखते रहने के बजाय fallback font से पढ़ना शुरू कर सकें।
Warning: font-display के बिना, कुछ browsers custom font के download पूरा होने तक text को पूरी तरह छिपा देते हैं, जिससे धीमे connections वाले visitors परेशान हो सकते हैं।

उदाहरण: Controlling Font Loading with font-display

markup 
<style>
  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2');
    font-display: swap;
  }
</style>

परफॉर्मेंस के लिए वेब फॉन्ट्स ऑप्टिमाइज़ करना

चूँकि font files extra network requests जोड़ती हैं, इसलिए अपनी font selection को lean रखना और compressed formats इस्तेमाल करना, page के जल्दी पढ़ने लायक महसूस होने की speed बेहतर बनाने का एक सबसे आसान तरीका है।

Note: अपने fonts को subset करें ताकि उनमें सिर्फ वही characters हों जिनकी आपकी site को असल में ज़रूरत है, जिससे file size काफी घट सकता है।
Warning: एक ही typeface के लिए चार या पाँच font weights लोड करना page को काफी धीमा कर सकता है, खासकर mobile networks वाले visitors के लिए।

उदाहरण: Optimizing Web Fonts for Performance

markup 
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400" rel="stylesheet">
Live Example
Related Topics

HTML आइकन फॉन्ट्स · HTML Web Components · HTML Web Workers · HTML Web Storage

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Responsive Images Next Lesson → HTML Icon Fonts

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.