If you want to add custom font in your WordPress website, you can do it pretty easily. Assume that you want to add Airbold Pro font in WordPress website, you need to follow 3 steps.
1. In order to use custom font, you need to upload the font to your theme directory. It is a good approach to create a folder named ‘fonts’ right in the theme root directory and upload the font file there. If you use a child theme, follow the same process.
2. Add the following line of code in your style.css (If you use child theme, add the line below after the @import…..)
@font-face { font-family: aireboldpro; src: local('aireboldpro'), url("fonts/AireBoldPro.otf") format('truetype'); }
3. Write CSS rule to use the given font. Eg..
body{ font-family: aireboldpro; font-size:12px; }
p{ font-family: aireboldpro; font-size:12px; }
.bigpara{ font-family: aireboldpro; font-size:15px; }
h1, h2{ font-family: aireboldpro; font-size:45px; font-weight:bold; color: #96BC33; }
The above example was based on how to use Aire Bold Pro Font in WordPress, If you want more fonts you can use the following line of code for step 2 and edit the font family in step 3 accordingly.
How to add Sudestada font in WordPress.
@font-face { font-family: sudestada; src: local('sudestada'), url("fonts/Sudestada.ttf") format('truetype'); }
How to add Gill Sans Light font in WordPress (You can chose font family name according to your choice.
@font-face { font-family: gillsans; src: local('gillsans'), url("fonts/GillSansStd-Light.otf") format('truetype'); }
How to add Aire Roman Pro font in WordPress.
@font-face { font-family: aireromanpro; src: local('aireromanpro'), url("fonts/AireRomanPro.otf") format('truetype'); }
How to add Myriad Pro font in WordPress.
@font-face { font-family: myriadpro; src: local('MyriadPro'), url("fonts/MyriadPro-Regular.otf") format('truetype'); }
If you need assistance in setting up a given font on your website, feel free to send us a message
