Fonts & Typography
font-family font specify karta hai — usually ek "fallback stack" diya jaata hai (comma-separated), taaki agar pehla font user ke system mein na ho, browser next try kare, aakhir mein generic (sans-serif/serif) fallback.
Custom fonts (jaise Google Fonts) @font-face rule ya <link> tag se load karte hain — website ko unique typography deta hai, system default fonts (Arial, Times) se aage.
body {
font-family: "Segoe UI", Roboto, Arial, sans-serif;
/* Segoe UI try karo, na mile to Roboto, na mile to Arial, aakhir generic sans-serif */
}
/* Google Fonts import (HTML mein <link> ya CSS @import): */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.heading {
font-family: 'Poppins', sans-serif;
font-weight: 700; /* bold */
}- font-family = fallback stack, comma-separated
- Generic fallback (sans-serif/serif) hamesha last mein rakho
- Custom fonts (Google Fonts etc.) unique typography dete hain
font-weight text ki "boldness" control karta hai (100-900 numeric scale, ya normal/bold keywords) — lekin sirf tab kaam karta hai agar font us weight ko actually support kare (custom fonts multiple weight files load karte hain). font-style: italic tilted text ke liye.
h1 {
font-weight: 700; /* bold — numeric */
}
.light-text {
font-weight: 300; /* light weight */
}
em {
font-style: italic;
}Custom fonts download hone mein time lagta hai. "System font stack" — user ke OS ka default font use karna (jaise San Francisco Mac par, Segoe UI Windows par) — koi download nahi, instant rendering, aur "native" feel deta hai.
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Har OS apna best-looking default font use karega, zero download */
}