Web Fonts e.g., Google Fonts In Hindi
किसी एचटीएमएल वेबपेज में सीएसएस से बने वेबपेज फॉण्ट टाइपफेस में गूगल और अन्य ऑनलाइन वेब फ़ॉन्ट का उपयोग किया जा सकता है. जिससे की आप मल्टीप्ल वेब ब्राउज़रों और इलेक्ट्रॉनिक डिवाइसेस गैजेट्स में प्रॉपर वेब कंटेंट को डिस्प्ले कर सकते है। जहा वेब फॉण्ट सलेक्शन में आपके पास बहुत सारे ऑनलाइन गूगल और अन्य फॉण्ट सिलेक्शन विकल्प है.
So let’s use online Google font through CSS in our existing HTML website.
Choosing Google font through CSS in HTML web page.
सबसे पहले आप अपने वेब प्रोजेक्ट वेबसाइट के लिए उपलब्ध ऑनलाइन गूगल फ़ॉन्ट ब्राउज़ करने के लिए गूगल फ़ॉन्ट की ऑफिसियल वेबसाइट पर मूव करे। अब यहाँ आप अपनी वेब डेवलपमेंट जरूरत के अनुसार गूगल फॉण्ट सलेक्शन में सेरिफ़, सैन्स-सेरिफ़, डिस्प्ले, हैंडराइटिंग, और मोनोस्पेस, में से किसी भी एक फॉण्ट को मैन्युअल सलेक्ट कर वेबपेज में एम्बेड कर सकते हैं।
Embedding a font with CSS in HTML web page.
आप अपने मौजूदा एचटीएमएल वेबपेज के लिए जब एक बार फ़ॉन्ट मैन्युअली सलेक्ट कर लेते हैं. तो आप इसे अपने मौजूदा वेबसाइट वेबपेज प्रोजेक्ट में डायरेक्ट एम्बेड या इन्सर्ट कर सकते हैं।
So let’s embed font in html webpage using CSS.
Step 1: First of all select the Desire font manually.
- यहाँ आप उस फ़ॉन्ट पर मैन्युअल क्लिक करें, जिसका आप उपयोग आप अपने मौजूदा वेबसाइट प्रोजेक्ट में करना चाहते हैं।
- नेक्स्ट में आप अपनी वेब डेवलपमेंट जरूरत के अनुसार फॉण्ट स्टाइल (वेट, इटैलिक) आदि बिहैवियर को सलेक्ट करे।
- अब डिजायर फ़ॉन्ट को अपने मौजूदा वेब प्रोजेक्ट में ऐड करने के लिए “+” बटन पर मैन्युअल क्लिक करें।
Step 2: Now receive the Desire font embed code.
- यहाँ आपको मैन्युअल फ़ॉन्ट सिलेक्शन के बाद, पेज के नीचे दाईं ओर एक पॉप-अप प्रीव्यू होगा।
- अब आपको मौजूदा वेब पेज के लिए फॉण्ट एम्बेड विकल्प एक्सेस करने के लिए उस ऑप्शन पर क्लिक करें।
- अंत में गूगल ऑनलाइन फॉण्ट को एम्बेड करने के लिए “एम्बेड” सेक्शन में दिए गए <link> टैग को मैन्युअल कॉपी करें।
Online Google font embed example in HTML web page css script.
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@300;800&display=swap” rel=”stylesheet”>
Adding Google fonts link to existing HTML webpage css.
ऑनलाइन गूगल फॉण्ट को अपने वेबपेज में लिंक को अपनी एचटीएमएल फ़ाइल के <head> सेक्शन में जोड़ना।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Html Web Fonts Css Example</title>
</head>
<style>
body {
font-family: ‘Roboto’; /* Here You See We Use Google Font */
margin: 4;
padding: 10px;
background-color: yellow;
}
h1 {
font-family: times new roman;
font-size: 3rem;
font-weight: 900; /* Make Heading Font Weight Bold */
color: red;
}
p {
font-size: 1.7rem;
font-weight: 300; /* Set Normal Font Weight */
color: blue;
}
</style>
<body>
<h1>Use Online Google Webfont In Html Web Page</h1>
<p>You Can See How Web Font Use In Your Web Page</p>
</body>
</html>
Using online fonts in CSS in HTML web page.
यहाँ आप अपने वेबपेज में सीएसएस में डिजायर गूगल फ़ॉन्ट का उपयोग कर फ़ॉन्ट-फ़ैमिली कोड प्रॉपर्टी को एम्बेड कर सकते हैं।
Font Embed Example in CSS.
body {
font-family: ‘Roboto’; /* Here You See We Use Google Font */
margin: 4;
padding: 10px;
background-color: yellow;
}
h1 {
font-family: times new roman;
font-size: 3rem;
font-weight: 900; /* Make Heading Font Weight Bold */
color: red;
}
p {
font-size: 1.7rem;
font-weight: 300; /* Set Normal Font Weight */
color: blue;
}
Online font, font weight, and font styles attributes.
अपने मौजूदा एचटीएमएल वेब पेज में फ़ॉन्ट स्टाइल्स और फॉण्ट वेट का उपयोग करते समय, यह तय करे की आप उन्हें एचटीएमएल वेबपेज के हेड सेक्शन में <link> टैग में प्रॉपर लिंक करें। जैसे, यदि आप अपने वेब पेज में रेगुलर और बोल्ड वेट सभी फॉण्ट ऐट्रिब्यूट्स को ऐड करने चाहते है. तो आप इसे निचे दिए गए तरीके से शामिल करे.
font, font weight, and font styles Example.
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap” rel=”stylesheet”>
Customize fallback font in CSS script in HTML webpage.
अपने मौजूदा वेब पेज में ऑनलाइन गूगल फ़ॉन्ट प्रॉपर लोड नहीं होने की कंडीशन में फ़ॉलबैक फ़ॉन्ट को ऐड करना एक अच्छा मेथड है। यहाँ आप इन्हें अपने फ़ॉन्ट-फ़ैमिली डिक्लेरेशन में प्रॉपर इंडीकेट करना होगा।
Fallback font HTML webpage example.
body {
font-family: ‘Roboto’, ‘Helvetica Neue’, Arial; /* Fallback fonts */
}
Online Google Fonts usage instructions.
अपने मौजूदा एचटीएमएल वेबपेज में लिमिटेड फॉण्ट का उपयोग करे. हमेशा याद रखे की बहुत अधिक ऑनलाइन गूगल फ़ॉन्ट फ़ैमिली या फॉण्ट वेट का उपयोग करने से आपकी वेबसाइट का लोडिंग समय स्लो हो सकता है।
अपने डिजायर वेब प्रोजेक्ट में केवल उन्ही ऑनलाइन गूगल फॉण्ट का उपयोग करें, जिसकी आपको वास्तव में आवश्यकता है. अपने प्रोजेक्ट में सभी उपलब्ध ऑनलाइन फॉण्ट विकल्पों को लोड करने के बजाय डिजायर फॉण्ट वेट और स्टाइल्स को ही चुनें।
Using Google fonts in HTML web page with the help of css.
ऑनलाइन गूगल फोंट्स को उपयोग कर आप अपनी मौजूदा एचटीएमएल वेबसाइट की टाइपोग्राफी में फॉण्ट, फॉण्ट स्टाइल, फॉण्ट वेट, को इम्प्रूव कर सकते हैं. ऑनलाइन गूगल फॉण्ट से अपनी वेबपेज को अट्रैक्टिव और कमर्सिअली प्रीव्यू कर सकते है। यहाँ ऑनलाइन गूगल फॉण्ट एम्बेड करने से आप अपने किसी भी वेबसाइट को बेहतर टाइपोग्राफी प्रदान कर सकते है.
