HTML Font Family, HTML में Font Family कैसे Add करें

(Html Font Family)

दोस्तों professional website design में font का role काफी अहम होता है क्योंकि कोई भी website जब लोड होती है तो उसमें सबसे पहले website का content लोड होता है और font दिखाई देता है, इसलिए font का वेबसाइट में होना जरूरी है |

आज की पोस्ट में हम बात करेंगे –

S. NoTopic
1.Font-family
2.How to use google fonts in HTML
3.Font-family in CSS
4.Font-face in CSS
5.How to add font in CSS

HTML Font Family क्या है ?

दोस्तों HTML font family में सबसे पहले बात करें font family क्या है और इसको क्यों use करें ?

font family शब्दों का परिवार है जिनमें छोटे बड़े सभी सदस्य सामिल होते हैं | font family में font weight से define किया जाता है की कोनसा कंटेंट bold होना है या कोनसा medium होना है या फिर कोनसा light होना है |

दोस्तों font family को हम अलग-अलग तरीकों से add कर सकते हैं अपनीं वेबसाइट में जैसे की font family को लिंक करवाना अपने HTML document में या फिर CSS फाइल में import करवाना या फिर font family को download कर के भी add करवा सकते हैं | आगे इन सभी methods की बात करेंगे |

इसके आलावा font की बात करें तो google font सबसे ज्यादा popular है इसलिए पहले google font की बात कर लेते हैं |

Google Font क्या है ?

दोस्तों एक गलत font website के लिए समस्या का कारण बन सकता है और इसी समस्या का समाधान google ने निकाल रखा है |

google के पास font-family की एक library है जो बिल्कुल free है open source है जिसे कोई ही use कर सकता है | Google Fonts वेबसाइटों और प्रोडक्ट्स की personality और performance को आसान बनाता है, चाहे आप दुनियां में कहि भी हों google font को आसानीं से add कर सकते हैं और ये सबसे आसान तथा सबसे सुरक्षित तरीक़ा है font add करने का |

Google Font के फायदे

दोस्तों google font के इस्तेमाल से हम किसी भी website में font add कर सकते हैं आसानीं से और google font हमें सभी method देता है जिनके use से हम font-family add कर सकते हैं |

  • आप चाहें तो direct font-family के लिंक को add कर सकते हैं किसी भी website में,
  • लिंक add करनें के आलावा आप google font से font को इम्पोर्ट भी कर सकते हैं अपनीं वेबसाइट में,
  • इम्पोर्ट के आलावा आप font को download भी कर सकते हैं |

इन सब बातों के आलावा सबसे खास बात यह है की google font किसी भी browser में ब्रेक नहीं होता है जिससे user को font अच्छे तरीके से नजर आता है और user आराम से content को read भी कर सकता है |

google font में आपको सभी types मिल जाते हैं जिनकी जरूरत browser को होती है |

how to download font family in css

How to use google fonts in HTML

google font को use करना सबसे आसान है और कारगर भी है क्योंकि google font सभी modern browser में काम करता है जैसे chrome, safari, Firefox आदि |

google font को आप 2 तरीकों से add कर सकते हैं अपनीं वेबसाइट में

  1. अपनें HTML document में font family को लिंक करवाकर
  2. अपनीं CSS फाइल में import करवाकर

google font use करनें के लिए आपको जाना होगा इसकी official वेबसाइट पर Google Font

html font family

यहाँ आपको काफी सारे font मिल जायेंगे इसके आलावा आप search bar में search भी कर सकते हैं |

आपको जो बेस्ट लगे उसे ही choose करें जैसे की मैं Roboto choose कर रहा हूँ तो Roboto पर क्लिक करना हैं | और उसके बाद आपको font की style select करनीं है जैसी आपको चाहिए | कुछ इस प्रकार से

how-to-add-font-family-in-html

फिर आपको लिंक मिल जाएगा जिसको add करना होगा आपके html document में head tag close होनें से पहले जैसे आपको नीचे इसका एक Example मिल जाएगा |

add-custom-font-in-html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Roboto Font Family</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,900&display=swap" rel="stylesheet"> 
</head>
<body>
	<h1>Robobto Font Family</h1>
</body>
</html>
<style>
	body{
		font-family: 'Roboto', sans-serif;
}
</style>

(html font family) – दोस्तों पहले method की बात तो हमने कर ली है अब बात करते हैं दूसरे method की तो, आप google font को import भी कर सकते हैं क्योंकि गूगल font-family को import करने का भी लिंक देता है |

font-family इंपोर्ट करने के लिए आपको right side में link के पास एक @import का बटन दिखाई देगा जिस पर क्लिक करते ही आपको लिंक मिल जाएगा और उस लिंक को आप कॉपी कर के अपनीं CSS फ़ाइल में सबसे ऊपर रख सकते हैं |

इसका उदहारण आप नीचे देख सकते हैं |

use google fonts in css
<style>
	@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,900&display=swap');
	body{
             font-family: 'Roboto', sans-serif;
         }
</style>

Download Font Family

html font family में अब बात करते हैं Download Font Family के बारे में, की कैसे आप फ़ॉंट फ़ैमिली को डाउनलोड कर सकते है और कैसे add कर सकते हैं अपनी वेबसाइट पर |

इसके आलावा और भी आर्टिकल हैं जो आपको पढनें चाहिए |

  1. WordPress Install In Localhost
  2. Inline And Block Element In Html
  3. How To Design Html Table

दोस्तों जब कोई font हमें google font की लाइब्रेरी पर नहिं मिलता है या फिर हम कोई font family download कर के font add करना चाहते हैं अपनीं website में तो इस condition में हमें करना होगा CSS का font face rule apply जैसे की –

<style>
	@font-face{
		font-family: use-custom-font-family;
		font-weight: 400;
		font-style: normal;
		src: url(your-font-url);
	}
	@font-face{
		font-family: use-custom-font-family;
		font-weight: 500;
		font-style: normal;
		src: url(your-font-url);
	}
</style>

दोस्तों ये सिर्फ एक उदहारण लिया है मैंने आप font face का rule official website पर चेक कर सकते हैं |

Q – Google Fonts क्या है ?

A – google font एक फॉण्ट की open source लाइब्रेरी है जहाँ आपको ढेर सारे font मिल सकते हैं काफी भाषाओं के जिनको आप बड़ी आसानीं से इस्तेमाल कर सकते हैं और ये सब बिल्कुल free है |

Q – क्या Google Font एक browser के लिए है ?

A – जी नहीं, google font किसी एक browser के लिए नहीं बनाया गया है | गूगल font सभी browsers में अच्छे तरीके से काम करता है |

Q – Google Font में कोन-कौनसे type होते हैं ?

A – Google Fonts में आपको वो सभी type मिल जाते हैं जिनकी जरूरत सभी browsers को होती है जैसे – OTF Type, TTF Type, WOFF Type, WOFF2 Type आदि |

Html Font Family Conclusion

आज के आर्टिकल में आपने सिखा की Html Font Family क्या है, Google Font क्या है ?, Google Font के क्या फायदे हैं ?, How to use google fonts in html

उम्मीद है दोस्तों Html Font Family के आर्टिकल से आपकी कुछ help हुई होगी | अगर आपको ये article पसंद आए तो आप अपने दोस्तों के साथ share करना ना भूलें और अगर आपके कोई सवाल है तो आप मुझे कमेंट में या फिर social media पर भी पूछ सकते हैं |

धन्यवाद

Leave a Comment