If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
किसी भी website के लिए font बहुत ही important part होता , काफी हद तक reading experience font family पर ही depend करता है। क्योंकि diff - diff font family diff - diff तरीके से content display करती है।
इस topic में आज हम इसी बारे में बात करेंगे कि CSS में कैसे font family को use करें।
font-family property का use करके हम किसी text का font family define करते हैं।
कुछ font-family values इस प्रकार हैं।
| Font family name | Example |
|---|---|
| cursive | This is font-family : cursive |
| monospace | This is font-family : monospace |
| sans-serif | This is font-family : sans-serif |
| serif | This is font-family : serif |
| fantasy | This is font-family : fantasy |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font-family example</title>
</head>
<body>
<p style="font-family: cursive; font-size:30px;">This is font-family : cursive</p>
<p style="font-family:monospace; font-size:30px;">This is font-family : monospace</p>
<p style="font-family:sans-serif; font-size:30px;">This is font-family : sans-serif</p>
<p style="font-family:serif; font-size:30px;">This is font-family : serif</p>
<p style="font-family:fantasy; font-size:30px;">This is font-family : fantasy</p>
</body>
</html>हालाँकि आप एक से ज्यादा font family style को एक साथ merge भी कर सकते हैं।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font-family example</title>
</head>
<body>
<h2 style="font-family: 'Courier New', Courier, monospace;">This is <b>'Courier New', Courier, monospace</b></h2>
<h2 style="font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">This is <b>'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;</b></h2>
<h2 style="font-family:Arial, Helvetica, sans-serif;">This is <b>Arial, Helvetica, sans-serif;</b></h2>
<h2 style="font-family:Verdana, Geneva, Tahoma, sans-serif;">This is <b>Verdana, Geneva, Tahoma, sans-serif</b></h2>
<h2 style="font-family:'Times New Roman', Times, serif;">This is 'Times New Roman', Times, serif;<b></b></h2>
</body>
</html>ऊपर जो font family के examples दिए गए हैं जरूरी नहीं आप वही use करें , आप चाहे तो google या किसी third party के fonts भी use कर सकते हैं। अभी हम सीखेंगे कि अगर google font use करना होतो कैसे करेंगे।
google font use करने के लिए आपको सबसे पहले https://fonts.google.com/ visit करें फिर वहां से , अपनी मनपसंद font select करें और वहां मिले CDN को अपने web page में link करें।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS google font example</title>
<link href="https://fonts.googleapis.com/css2?family=Send+Flowers&display=swap" rel="stylesheet">
</head>
<body>
<h2 style="font-family:'Send Flowers', cursive;">So this is how , you can use google font using CDN. I hope now you've understood this :)</h2>
</body>
</html>
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
