Website में Custom Font कैसे इस्तेमाल करे ?

जब हम कोई नई blog ya website बनाते है, तो उसमे font की महत्वपूर्ण भूमिका होती है। Font की boldness, browser compatibility, readability, support आदि।

Custom font 2 भाग में रखते है ताकि आसानी से हमे समझ में आ जाये।

1. Google font
2. Manual font face

Google Font

Google font का मतलब google के font की लाइब्रेरी है। यहाँ से फ्री में font डाउनलोड कर सकते है। जो की डायरेक्ट WordPress, HTML, CSS में इस्तेमाल कर सकते hai।

Google font का इस्तेमाल कैसे करे ?

Step-1 :
Google font की वेबसाइट पर जाये : Google font – यहाँ से आप language, trending, categories, select करके font सर्च कर सकते है।

Step-2 :
एक प्लस का icon show हो रहा है, उस पर क्लिक कीजिये। जैसे ही आप प्लस icon पर क्लिक करेंगे तो bottom में एक तब ओपन होगा। यहाँ पर बहुत से ऑप्टिमाइजेशन के ऑप्शन मिल जायेंगे।

Example : Blod, Regular, Light, Black,

Google font को अपने वेबसाइट में 2 तरह से इस्तेमाल कर सकते है।

• Standard format
• @Import format

Standard format

Standard format में google font का stylesheet provide करता है। इस url को आप अपने वेबसाइट में head tag के अंदर paste कीजिए । CSS फाइल open करके body के selector में font family change कर दीजिये। अब साइट चेक करेंगे तो font आपकी वेबसाइट पर दिख रहा होगा।

@Import format

@import format के लिए भी google css url प्रोवाइड करता है। जिसे अपनी css फाइल में सबसे टॉप पर add कर देते है। Body selector ke अंदर हम font family चेंज कर देते है।

Also Read: डेटाबेस मैनेजमेंट सिस्टम (DBMS) क्या है?

Font face

जब हम कोई custom font या purchased font का इस्तेमाल करते है तो हमे उस font का font face बनाना पड़ता है। जो की सभी कंप्यूटर पैर शो करे। Font face बनाने के लिए कुछ वेबसाइट नीचे दी गयी है।

• https://www.fontsquirrel.com
• https://transfonter.org/
• https://everythingfonts.com
• https://www.web-font-generator.com

Go to the website : https://everythingfonts.com/

यहाँ पर font को अपलोड करके convert करे। Font face की एक zip फाइल डाउनलोड हो जाएगी। 4 तरह के फॉण्ट डाउनलोड होते है।

• eot
• woff
• ttf
• svg

अब fonts को अपने प्रोजेक्ट के फॉण्ट फोल्डर में ऐड कीजिये। Font face की css को css फाइल में और font family body में ऐड करे।

CSS

@font-face {
font-family: ‘Sri-TSCRegular’;
src: url(‘fonts/sri-tsc-webfont.eot’);
src: url(‘fonts/sri-tsc-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/sri-tsc-webfont.woff’) format(‘woff’),
url(‘fonts/sri-tsc-webfont.ttf’) format(‘truetype’),
url(‘fonts/sri-tsc-webfont.svg#Sri-TSCRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}


body { font-family: “Sri-TSCRegular”, serif }