CSS Fonts

टेक्स्ट सिर्फ पढ़ने के लिए नहीं होता — उसका look, feel और readability भी बहुत मायने रखता है। और यही काम करता है CSS Fonts. इस लेसन में हम सीखेंगे कि कैसे आप अपने वेबपेज के टेक्स्ट को Stylish, Readable और Attractive बना सकते हैं

CSS Fonts क्या होते हैं?

CSS Fonts का मतलब है — आपके टेक्स्ट का typeface (लिखावट) तय करना। जैसे कि: Arial, Verdana, Times New Roman, Poppins, Roboto आदि। Simple words में —

“Font defines how your text will look on screen.”

Font Properties Overview

Property (प्रॉपर्टी)	Description (विवरण)
`font-family`	कौन सा font उपयोग होगा
`font-size`	font का आकार
`font-style`	italic या normal
`font-weight`	मोटाई (boldness)
`font-variant`	small-caps में दिखाना
`line-height`	लाइनों के बीच space (जगह)
`font`	shorthand (सभी को एक साथ लिखने का तरीका)

Font Family (फ़ॉन्ट का नाम)

p {
  font-family: Arial;
}

लेकिन! अगर user के device में Arial font न हो तो? इसलिए हम हमेशा एक fallback font list देते हैं:

p {
  font-family: "Poppins", "Verdana", sans-serif;
}

इसका मतलब:
पहले “Poppins” ट्राय करेगा,
नहीं मिला तो “Verdana”,
नहीं तो default sans-serif.

Font Family के दो मुख्य प्रकार

Type (प्रकार)	Example (उदाहरण)	Description (विवरण)
Serif	Times New Roman	Traditional look, books/newspapers में
Sans-serif	Arial, Verdana	Modern & clean look, websites के लिए perfect

Font Size (टेक्स्ट का आकार)

Font size को कई units में दिया जा सकता है:

p {
  font-size: 16px;
}

या relative units से:

h1 { font-size: 2em; }  /* Parent font-size का 2 गुना */
h2 { font-size: 1.5rem; } /* Root font-size का 1.5 गुना */

Common values:
px → fixed size
em / rem → responsive web design में helpful

Font Style (Italic या Normal)

p {
  font-style: italic;
}

Options:
normal
italic
oblique (slanted look)

Font Weight (मोटाई)

h1 {
  font-weight: bold;
}

या numeric values में:

p { font-weight: 100; }  /* बहुत हल्का */
p { font-weight: 700; }  /* bold */

Values range: 100 → 900

Font Variant (Small Caps)

p {
  font-variant: small-caps;
}

यह text को capital letter में दिखाता है, लेकिन छोटे size में।

Line Height (Line Spacing)

p {
  line-height: 1.8;
}

यह property paragraph को readable और balanced बनाती है।

Font Shorthand Property

आप इन सबको एक लाइन में भी लिख सकते हैं |

p {
  font: italic small-caps bold 16px/1.5 "Poppins", sans-serif;
}

Order:

font: font-style font-variant font-weight font-size/line-height font-family;

Web Safe Fonts

हर system में कुछ default fonts होते हैं जिन्हें web safe fonts कहा जाता है:

फ़ॉन्ट (Font)	प्रकार (Type)
Arial	Sans-serif
Verdana	Sans-serif
Times New Roman	Serif
Courier New	Monospace
Georgia	Serif
Tahoma	Sans-serif
Trebuchet MS	Sans-serif

इनका इस्तेमाल करने से वेबसाइट हर device पर सही दिखती है।

Google Fonts (सबसे ज़्यादा Use होने वाला तरीका)

आप अपनी वेबसाइट में Google Fonts import करके modern और unique fonts इस्तेमाल कर सकते हैं।

Example:

Step 1: https://fonts.google.com पर जाएँ और कोई font चुनें (जैसे Poppins)।
Step 2: Google Fonts आपको एक link देगा, जैसे:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

Step 3: अब CSS में use करें

body {
  font-family: "Poppins", sans-serif;
}

Example – Full Font Styling Demo

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.font-demo {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  color: #333;
  line-height: 1.8;
  background: #fafafa;
  padding: 20px;
  border-left: 5px solid #0077cc;
}

.font-demo h1 {
  font-weight: 600;
  font-size: 28px;
  text-align: center;
  color: #0077cc;
}
</styel>

<div class="font-demo">
  <h1>Welcome to CSS Fonts Lesson</h1>
  <p>
    यह पैराग्राफ दिखाएगा कि कैसे font-family, size, weight और line-height वेबसाइट के टेक्स्ट को आकर्षक बना सकते हैं।
  </p>
</div>

Common Mistakes

❌ सिर्फ एक font-family देना
✅ हमेशा fallback fonts शामिल करें
❌ px में बहुत बड़ा font-size देना
✅ Responsive design के लिए em या rem use करें
❌ Google Fonts का link HTML में जोड़ना भूल जाना
✅ बिना import किए font काम नहीं करेगा

Pro Tips

Headings के लिए bold modern font (जैसे “Poppins”, “Montserrat”)
Paragraphs के लिए readable font (जैसे “Roboto”, “Open Sans”)
Always maintain contrast — light background + dark text
Line-height कम से कम 1.5 रखें

Quick Recap

Property (प्रॉपर्टी)	Description (विवरण)
`font-family`	Font का नाम या list (Name or list of fonts)
`font-size`	Font का आकार (Size of the font)
`font-style`	Italic या Normal
`font-weight`	Boldness (जैसे: bold, normal, या numbers)
`font-variant`	Small caps effect
`font`	Shorthand property (सभी font properties को एक साथ सेट करने के लिए)
`line-height`	Line spacing (लाइनों के बीच की दूरी)

Final Thoughts

Fonts आपकी वेबसाइट की personality और readability तय करते हैं। सही font-family और spacing से आपका content professional और eye-friendly दोनों लगता है