सीएसएस गूगल फ़ॉन्ट्स
गूगल फ़ॉन्ट्स
यदि आप HTML में किसी भी मानक फ़ॉन्ट का उपयोग नहीं करना चाहते हैं, तो आप Google फ़ॉन्ट्स का उपयोग कर सकते हैं।
Google फ़ॉन्ट उपयोग करने के लिए स्वतंत्र हैं, और इनमें से चुनने के लिए 1000 से अधिक फ़ॉन्ट हैं।
Google फ़ॉन्ट्स का उपयोग कैसे करें
बस <head> अनुभाग में एक विशेष स्टाइल शीट लिंक जोड़ें और फिर CSS में फ़ॉन्ट देखें।
उदाहरण
यहां, हम Google फ़ॉन्ट्स से "सोफिया" नामक फ़ॉन्ट का उपयोग करना चाहते हैं:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
परिणाम:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
उदाहरण
यहां, हम Google Fonts से "Triong" नाम के एक फॉन्ट का उपयोग करना चाहते हैं:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
परिणाम:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
उदाहरण
यहां, हम Google फ़ॉन्ट्स से "ऑडियोवाइड" नामक फ़ॉन्ट का उपयोग करना चाहते हैं:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
परिणाम:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
नोट: सीएसएस में एक फ़ॉन्ट निर्दिष्ट करते समय, हमेशा कम से कम एक फ़ॉलबैक फ़ॉन्ट सूचीबद्ध करें (अप्रत्याशित व्यवहार से बचने के लिए)। तो, यहां भी आपको सूची के अंत में एक सामान्य फ़ॉन्ट परिवार (जैसे सेरिफ़ या सैन्स-सेरिफ़) जोड़ना चाहिए।
सभी उपलब्ध Google फ़ॉन्ट्स की सूची के लिए, हमारे How To - Google Fonts Tutorial पर जाएं ।
एकाधिक Google फ़ॉन्ट्स का प्रयोग करें
एकाधिक Google फोंट का उपयोग करने के लिए, बस फ़ॉन्ट नामों को एक पाइप वर्ण ( |) से अलग करें, जैसे:
उदाहरण
एकाधिक फ़ॉन्ट्स का अनुरोध करें:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
परिणाम:
Audiowide Font
Sofia Font
Trirong Font
नोट: एकाधिक फ़ॉन्ट का अनुरोध करने से आपके वेब पृष्ठ धीमे हो सकते हैं! तो इसके बारे में सावधान रहें।
Google फ़ॉन्ट्स को स्टाइल करना
बेशक आप सीएसएस के साथ Google फ़ॉन्ट्स को अपनी पसंद के अनुसार स्टाइल कर सकते हैं!
उदाहरण
"सोफिया" फ़ॉन्ट को स्टाइल करें:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
परिणाम:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
फ़ॉन्ट प्रभाव सक्षम करना
Google ने विभिन्न फ़ॉन्ट प्रभाव भी सक्षम किए हैं जिनका आप उपयोग कर सकते हैं।
पहले Google API में जोड़ें, फिर उस तत्व में एक विशेष वर्ग का नाम जोड़ें जो विशेष प्रभाव का उपयोग करने वाला है। कक्षा का नाम हमेशा के साथ शुरू होता है
और समाप्त होता है ।effect=effectnamefont-effect-effectname
उदाहरण
"सोफिया" फ़ॉन्ट में अग्नि प्रभाव जोड़ें:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
परिणाम:
Sofia on Fire
एकाधिक फ़ॉन्ट प्रभावों का अनुरोध करने के लिए, बस प्रभाव नामों को एक पाइप वर्ण ( |) से अलग करें, जैसे:
उदाहरण
"सोफिया" फ़ॉन्ट में कई प्रभाव जोड़ें:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
परिणाम:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect