CSS Custom Fonts
In this page:
@font-face {
font-family: "CustomName";
src: url("font-file.woff2") format("woff2");
}
selector {
font-family: "CustomName", fallback-family;
}@font-face Rule
@font-face एक या ज़्यादा font files की तरफ़ point करके और उस family को एक नाम देकर एक नया custom font family define करता है जिसे आप फिर किसी और font-family value की तरह reference कर सकते हैं। यह एक बार declare होता है, आमतौर पर किसी stylesheet के top के पास, किसी भी selector के उस नाम को इस्तेमाल करने से पहले।
- Accepted values:
- @font-face — एक custom font declare करता है
- font-family — आपके चुने गए नाम
- src — url("file.woff2") format("woff2"), या किसी installed font के लिए local()
- font-display — auto | block | swap | fallback | optional
- font-weight | font-style — file किस variant को provide करती है
- unicode-range — file किन characters को cover करती है
उदाहरण: The @font-face Rule
<style>
@font-face {
font-family: "MyFont";
src: url("myfont.woff2");
}
p {
font-family: "MyFont";
}
</style>
<p>Uses the custom font family defined above</p>Font File Formats
Modern browsers मुख्य रूप से WOFF2 (सबसे छोटा, सबसे अच्छा compression) चाहते हैं, थोड़े पुराने browsers के लिए WOFF fallback के साथ; TTF/OTF आज web के लिए शायद ही कभी चाहिए होते हैं। एक ही @font-face block में कई src formats list करना browser को वह पहला format चुनने देता है जो वह असल में support करता है।
उदाहरण: Font File Formats
<style>
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2"),
url("myfont.woff") format("woff");
}
</style>
<p>Browser picks the first format it supports</p>@font-face में font-weight और font-style
एक अकेला font family अक्सर कई अलग files के रूप में ship होता है, हर weight/style combination (regular, bold, italic) के लिए एक। हर variant को matching font-weight/font-style values के साथ अपना @font-face block चाहिए ताकि बाद में किसी element पर font-weight: bold इस्तेमाल करना regular file को fake-bold करने के बजाय सही तरीके से bold file को select करे।
- Accepted values:
- normal | bold — keywords
- 1 से 1000 — numeric weights, आमतौर पर 100 से 900
- एक range — जैसे variable fonts के लिए 100 900
- font-style: normal | italic | oblique
उदाहरण: font-weight and font-style in @font-face
<style>
@font-face {
font-family: "MyFont";
src: url("myfont-bold.woff2");
font-weight: bold;
}
strong {
font-family: "MyFont";
}
</style>
<strong>Loads the real bold file, not a fake bold</strong>Custom Fonts के लिए Fallback Stacks
क्योंकि किसी custom font file को render होने से पहले download होना ज़रूरी है, हमेशा font-family में उसके बाद एक जैसा दिखने वाला system font (या sans-serif जैसी generic family) list करें, ताकि उस छोटे loading window के दौरान या download पूरी तरह fail होने पर भी text पढ़ने लायक बना रहे।
उदाहरण: Fallback Stacks for Custom Fonts
<style>
p {
font-family: "MyFont", Arial, sans-serif;
}
</style>
<p>Falls back to Arial while MyFont loads, or if it fails</p>font-display और Loading Behavior
font-display property (जैसे swap) control करती है कि किसी custom font के अभी भी download होने के दौरान text का क्या होता है — swap तुरंत fallback font दिखाता है और तैयार होने पर custom font को swap कर देता है, invisible text से बचते हुए और perceived performance बेहतर करते हुए।
- Accepted values:
- auto — browser तय करता है (initial value)
- block — थोड़ी देर invisible text, फिर swap
- swap — तुरंत fallback font, load होने पर swap
- fallback — बहुत छोटा block, छोटा swap
- optional — browser font को skip कर सकता है
उदाहरण: font-display and Loading Behavior
<style>
@font-face {
font-family: "MyFont";
src: url("myfont.woff2");
font-display: swap;
}
</style>
<p style="font-family: 'MyFont', sans-serif;">Fallback shows immediately, swaps once ready</p>srcको गलत file path पर point करना, इसलिए font चुपचाप default font पर fall back हो जाता है।font-familyमें कोई fallback font न देना, इसलिए file load होने के दौरान text गलत दिखता है।- element में एक ऐसी
font-weightइस्तेमाल करना जिसकी कोई matching font file नहीं है, इसलिए browser एक bold fake करता है।
हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: