In order to use your custom fonts with our theme, please follow the instructions below.
Step 1 – Upload your custom font
For example, create a folder entitled “fonts” inside your WordPress installation root folder and upload your custom fonts inside so it can be easily accessible via http://yourwebsite.com/fonts. Basically, you can upload it anywhere on your server but you should keep in mind that you will need to remember and use this path later.
Step 2 – Connect the font with the theme options
Next, you need to add this code inside Apperance -> Customize -> Additional CSS.
1 2 3 4 5 6 7 8 9 | @font-face { font-family: 'YourFontFileName'; src: url('http://yourwebsite.com/fonts/YourFontFileName.eot'); /* IE9 Compat Modes */ src: url('http://yourwebsite.com/fonts/YourFontFileName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://yourwebsite.com/fonts/YourFontFileName.woff2') format('woff2'), /* Super Modern Browsers */ url('http://yourwebsite.com/fonts/YourFontFileName.woff') format('woff'), /* Pretty Modern Browsers */ url('http://yourwebsite.com/fonts/YourFontFileName.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://yourwebsite.com/fonts/YourFontFileName.svg#svgFontName') format('svg'); /* Legacy iOS */ } |
Please note that once you enter the above code, you need to rename the paths to your actual website as well as ‘YourFontFileName’ instances (example: font-family: ‘YourFontFileName’;) with your actual font name.
Step 3 – Apply font styles to specific elements on the website
If you want to use this font as the main text font, just add this line into Apperance -> Customize -> Additional CSS field.
1 | body p {font-family: 'YourFontFileName' !important;} |
To use this font for headings, just add this line into Apperance -> Customize -> Additional CSS field.
1 | h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: 'YourFontFileName' !important;} |
Additional tips
As you might notice, the above provided CSS code is handling large number of different font formats and if your custom font is coming in TTF or OTF format, you might consider generating the needed formats for your fonts on FontSquirrel. Just visit this page here: https://www.fontsquirrel.com/tools/webfont-generator and upload your custom font and generate the needed files. Once you finish this process you will receive .zip file that will contain your font in needed formats like woff, woff2, eot and svg.