Hello friends Is post me hum janenge blog ya website me custom font kaise use kare. jab hum koi new blog ya website banate hai to usame font ki bhoomika kaphi important hoti hai. Font ki boldness, browser compatibility, readability, support etc.
Custom font 2 part me rakhate hai taki aasani hume samajh me aa jaye.
- Google font
- Manual font face
Google Font
Google font means google ki font ki library hai, Yaha se free me font download kar sakate hai. Jo ki Direct WordPress, HTML, CSS me use hota hai.
Google font kaise use kare
Step-1 :
Go to the website : Google font Yaha se aap language, trending, categories, select karke font search kar sakate hai.
Step-2 :
Ek plus ka icon show ho raha hai us click kijiye. Jaise hi aap plus icon per click karenge to bottom me ek tab open hoga. Yaha per bahut se optimization ke option mil Jayenge.
Example : Blod, Regular, Light, Black,
Google font ko apane blog me 2 tarah se call kar sakate hai.
- Standard format
- @Import format
Standard format
Standard format me google font ka stylesheet url provide karata hai. Is url ko aap apane website me head tag ke under paste kijiye. CSS file open karake body ki ke selector me font family change kar dijiye. Ab site check karenge to font work kar raha hoga.
@Import format
@import format ke liye bhi google css url provide karata hai. Jise apani css file me sabase top per add kare dete hai. Body selector ke under hum font family change kare dete hai.
Also Read : Domain name kya hai ? (What is domain dame in hindi)
Font face
Jab hum koi custom font ya purchased font use karate hai to Hume us font ka font face create karana hota hai. Jo ki sbhi computer per show kare. Font face create karane ke liye bahut sari website hai.
- https://www.fontsquirrel.com
- https://transfonter.org/
- https://everythingfonts.com
- https://www.web-font-generator.com
Step 1
Go to the website : https://everythingfonts.com/
Yaha per font ko upload karake convert kare. Font face ki ek zip file download ho jayegi. 4 tarah ke font download hote hai.
- eot
- woff
- ttf
- svg
Ab fonts ko apane project ke font folder me add kijiye. Font face ki css ko css file me aur font family body me add kare.
CSS
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 }
Vivek Prasad
Bahut Achaa Post Likha hai aapke, I Really Appreciate you