CSS font-family in Hindi

📔 : CSS 🔗

किसी भी 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 करते हैं।

CSS Generic Font Families

कुछ 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

CSS font-family example

CopyFullscreenClose FullscreenRun
<!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 भी कर सकते हैं।

CopyFullscreenClose FullscreenRun
<!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>

CSS google font

ऊपर जो 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 करें।

CSS google font example

CopyFullscreenClose FullscreenRun
<!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>

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers