किसी भी 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>Preview
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>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>