W3.CSS Google फ़ॉन्ट्स
W3.CSS के साथ नए फोंट जोड़ना बेहद आसान है।
- उपयोग करने में बहुत आसान (केवल CSS और HTML)
- बाहरी फ़ॉन्ट पुस्तकालयों का असीमित उपयोग (जैसे Google फ़ॉन्ट्स)
- सभी आधुनिक ब्राउज़रों में काम करता है
यह रोबोटो है
यह सोफिया है
सोफिया ऑन फायर
वेब बनाना!
वेब बनाना!
वेब बनाना!
वेब बनाना!
वेब बनाना!
Google फ़ॉन्ट्स का उपयोग करना
Google फ़ॉन्ट्स उपयोग करने के लिए स्वतंत्र हैं, और इनमें से चुनने के लिए 1000 से अधिक फ़ॉन्ट हैं।
अपने वेब पेज के शीर्ष में, Google फ़ॉन्ट से लिंक करें:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
फिर इसका उपयोग कहां करना है इसके बारे में CSS जोड़ें:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
एक और उदाहरण
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
एक फॉन्ट क्लास बनाएं
अपने वेब पेज के शीर्ष में, Google फ़ॉन्ट से लिंक करें:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
फिर एक फॉन्ट क्लास बनाएं:
उदाहरण
.w3-sofia {
font-family: Sofia, cursive;
}
अपने वेब पेज में, फ़ॉन्ट वर्ग का उपयोग करें:
उदाहरण
<p class="w3-sofia">Making the Web!</p>
वेब बनाना!
उदाहरण
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
वेब बनाना!
उदाहरण
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
वेब बनाना!
उदाहरण
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
वेब बनाना!
उदाहरण
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
वेब बनाना!