← Back to CSS Course | Chapter 4: Text & Fonts | Lesson 4 of 10

CSS Fonts

Typeface choice किसी visitor के एक शब्द पढ़ने से पहले ही पूरे page का tone set कर देती है। CSS fonts एक typeface चुनने से लेकर उसका size, weight, और style control करने तक सब कुछ cover करते हैं। font-family बताता है कि कौन-सा typeface इस्तेमाल करना है (fallbacks के साथ अगर पहली choice available न हो), font-size तय करता है कि text कितना बड़ा render होता है, font-weight boldness control करता है, font-style italics control करता है, और font-variant small caps जैसे extra typographic touches देता है। एक shorthand font property इनमें से कई को एक line में combine कर सकती है। हर device में पहले से installed मुट्ठी भर 'web safe' fonts से आगे, Google Fonts जैसी services cookiescursor.com जैसी site को मुफ़्त में distinctive custom typefaces इस्तेमाल करने देती हैं।

In this page:

  1. font-family और Fallback Fonts
  2. font-size और font-weight
  3. font-style और font-variant
  4. Shorthand font Property
  5. Google Fonts और Web Safe Fonts
Syntax
css 
selector {
  font-family: "Font Name", fallback-family;
  font-size: length;
  font-weight: normal | bold | number;
  font-style: normal | italic;
}

font-family और Fallback Fonts

font-family बताता है कि कौन-सा typeface(s) इस्तेमाल करना है, preference के order में। अगर पहली choice visitor की device पर available नहीं है, तो browser list की अगली वाली try करता है, sans-serif या serif जैसे generic fallback पर खत्म होते हुए।

Note:
  • हमेशा किसी font-family list को एक generic fallback पर खत्म करें, यह guarantee करता है कि हर named font load न होने पर भी text readable बना रहे।
  • Accepted values:
  • font-family — comma-separated list; spaces वाले names को quote करें, जैसे "Open Sans"
  • serif | sans-serif | monospace — सबसे common generic fallbacks
  • cursive | fantasy — decorative generic families
  • system-ui — operating system का UI font
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: 'Segoe UI' जैसे spaces वाले font names को font-family value के अंदर quotes में wrap करना ज़रूरी है।

उदाहरण: font-family and Fallback Fonts

css 
<style>
p {
  font-family: "Segoe UI", Arial, sans-serif;
}
</style>
<p>Falls back through the list if a font isn't available</p>

font-size और font-weight

font-size तय करता है कि text कितना बड़ा render होता है, और font-weight तय करता है कि वह कितना bold दिखता है, thin (100) से लेकर normal (400) होते हुए bold (700) और उससे आगे तक।

Note:
  • जहाँ possible हो font-size के लिए rem units इस्तेमाल करें, ये page की base font size के relative consistently scale होते हैं और visitor की browser settings का सम्मान करते हैं।
  • Accepted values:
  • length — जैसे 16px, 1.25rem, 1.5em
  • keyword — xx-small से xx-large (medium default है)
  • larger | smaller — parent के size के relative
  • percentage — parent की font size के relative
  • font-weight: normal (400), bold (700), या 1 से 1000 तक कोई number
  • font-weight: lighter | bolder — parent के relative
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: एक ऐसी font-weight set करना जो loaded font में असल में शामिल नहीं है, browser को एक fake bold synthesize करने पर मजबूर कर सकता है, जो थोड़ा distorted दिख सकता है।

उदाहरण: font-size and font-weight

css 
<style>
p {
  font-size: 20px;
  font-weight: 700;
}
</style>
<p>Large, bold text</p>

font-style और font-variant

font-style italics toggle करता है, सबसे common रूप से normal या italic। font-variant extra typographic options देता है, सबसे ख़ास तौर पर small-caps, जो lowercase letters को छोटे uppercase letters की तरह render करता है।

Note:
  • Italics को कम मात्रा में इस्तेमाल करें, emphasis या citations के लिए, क्योंकि इन्हें ज़्यादा इस्तेमाल करना text को जल्दी scan करना मुश्किल बना सकता है।
  • Accepted values:
  • normal — upright text (initial value)
  • italic — font का italic face
  • oblique — slanted; एक angle ले सकता है
  • font-variant: normal | small-caps
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: हर font file में असली italic glyphs शामिल नहीं होते; इनके बिना, browser एक slanted fake italic generate कर सकता है जो कम refined दिख सकता है।

उदाहरण: font-style and font-variant

css 
<style>
em {
  font-style: italic;
}
.caps {
  font-variant: small-caps;
}
</style>
<p><em>Italic emphasis</em></p>
<p class="caps">Small caps text</p>

Shorthand font Property

font shorthand style, weight, size, और family को एक declaration में combine करता है। Size और family ज़रूरी हैं, उसी order में, value के अंत के पास।

Note:
  • एक बार जब आप individual font properties में सहज हो जाएँ तो shorthand काम की है, लेकिन सीखते समय longhand versions अक्सर ज़्यादा साफ़ होते हैं।
  • Accepted values:
  • font-size — ज़रूरी, जैसे 16px
  • font-family — ज़रूरी, आख़िर में आता है
  • font-style / font-variant / font-weight — optional, size से पहले
  • line-height — optional, size और एक slash के बाद, जैसे 16px/1.5
  • system fonts — caption, menu, status-bar और दूसरे
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: font shorthand उस किसी भी font property को जिसे आप explicitly शामिल नहीं करते वापस उसकी default पर reset कर देता है, जो कहीं और की settings को undo कर सकता है।

उदाहरण: Shorthand font Property

css 
<style>
p {
  font: italic bold 18px "Segoe UI", sans-serif;
}
</style>
<p>Style, weight, size, and family in one line</p>

Google Fonts और Web Safe Fonts

'Web safe' fonts (जैसे Arial, Georgia, और Verdana) लगभग हर device पर पहले से installed हैं, इसलिए ये बिना किसी extra loading के reliably render होते हैं। Google Fonts एक free service है जो आपको उस safe list से आगे custom typefaces load करने देती है।

Note: जब reliability सबसे ज़्यादा मायने रखे तो web safe font stack चुनें, और जब कोई distinctive brand typeface extra network request के लायक हो तो Google Fonts।
Warning: जो Google Font अभी पूरी तरह load नहीं हुआ है वह swap होने से पहले थोड़ी देर के लिए एक fallback font दिखाएगा, जो एक छोटा visual flash कर सकता है।

उदाहरण: Google Fonts and Web Safe Fonts

css 
<style>
.safe {
  font-family: Arial, Georgia, Verdana, sans-serif;
}
</style>
<p class="safe">Web safe fonts render reliably with no extra loading</p>
Live Example
Related Topics

CSS Text Effects · CSS Text Advanced · CSS Text · CSS Icons

{# 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. #}
आम गलतियां
  1. font-family में सिर्फ एक font specify करना, बिना किसी fallback के अगर वह font load न हो पाए।
  2. एक ऐसी font-weight value इस्तेमाल करना जिसे loaded font file असल में support नहीं करती, जिसे browsers fake कर सकते हैं या नज़रअंदाज़ कर सकते हैं।
  3. font-family में उस font name को reference करने से पहले Google Fonts stylesheet link करना भूल जाना।
चैप्टर सारांश
  • font-family, font-size, font-weight, और font-style text typography के core building blocks हैं।
  • हमेशा किसी font-family list के अंत में एक generic fallback (जैसे sans-serif) list करें।
  • Google Fonts और दूसरी font services आपको standard web safe fonts से आगे custom typefaces इस्तेमाल करने देती हैं।
ब्राउज़र सपोर्ट

Standard CSS font properties हर modern browser में supported हैं; Google Fonts वहाँ काम करता है जहाँ भी कोई browser external stylesheet load कर सकता है।

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Text Effects Next Lesson → CSS Font Advanced

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.