CSS Icons

CSS font-family in Hindi

by

किसी भी blog आर्टिकल को पढ़ने योग्य (readable) बनाने के लिए text font family बहुत अच्छी भूमिका निभाती है। अगर सही जगह पर सही font use नहीं किया जाये तो वो article पढ़ने में अच्छा नहीं लगेगा साथ ही इसका उसे किसी भी page की सुंदरता बढ़ाने के लिए भी किया जाता है। इसके लिए CSS के font-family property का use किया जाता है।

आइये इसके एक example से समझने का प्रयास करते है :

<!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>
HTML

Preview

CSS font-family example

This is font-family : cursive



This is font-family : monospace



This is font-family : sans-serif



This is font-family : serif



This is font-family : fantasy



आप एक साथ अनेक font family भी use कर सकते है। 

<!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>
  </body>
</html>
HTML
CSS font-family example

This is ‘Courier New’, Courier, monospace



This is ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;

How to use google font in hindi

CSS में font family को apply करने का एक और तरीका यह है आप google font या किसी third party के fonts को भी use कर सकते है।

ये तरीका use करने के लिए आपको सबसे पहले  https://fonts.google.com/ में visit करना होगा फिर आपको अपने पसंद की font को select करके प्राप्त CDN को अपने web page में लिंक करना होगा।

आइये इसे एक example से समझने का प्रयास करते है। 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS google font example By Technalay</title>
    <link href="https://fonts.googleapis.com/css2?family=Send+Flowers&display=swap" rel="stylesheet">
  </head>
   <body>
     <h2 style="font-family:'Send Flowers', cursive;">You can use google font using CDN.</h2>
   </body>
</html>
HTML

Leave a comment