If you want to install custom fonts on your WordPress website then the first step is to create a folder in your Cpanel/file manager or server. 2nd you need to use @fontcface CSS code in your theme CSS file. And in the third step create a custom font by using <span> class within HTML or Post-text. And it’s done!
Now let’s explore this method stepwise.
Download font files from the creative market or any other source. Mostly you get these file in a .zip folder.
1. Create Font folder in Cpanel or server.
Visit your public HTML folder in Cpanel. Find your website path. Got to theme folder and create fonts folder. Mostly the high-quality WordPress themes have font’s folder. And if it’s not there it’s tough to identify in which one you can upload fonts files.
But you can create a folder with name font or custom font inside your theme folder. It’s the area in which you find index.php, functions.php files.
After creating the folder. Upload custom font zipped folder. Extract this here. After able to see the fonts files. Delete the zipped folder (optional), but helpful if you want the server space under control.
Now you uploaded the font successfully. It’s time to move to a style.css file.
Add @fontface command in CSS file to import font into a WordPress theme. And for that, you can use the following code.
Font-family: Add your custom-font name here;
2. Now create span class in place you want to display custom font
If you want to display custom font in your blog post/page then open the file and edit the text. Now before the word/line/ you want to use custom font use. <Span Class = “Custom-font”>Contact for WordPress Website Customization</span>
You can also use <h1 class “custom-font”>Contact for WordPress Website Customization</h1>
3. Now install site-0rign CSS or custom CSS plugin.
Now open custom CSS in Visual mode. Open the page/post in which you created the span class custom-font. After the select that word, when you selected the correct then it will display an outline on screen with the span class name.
Now just find font-family and add the name of your font. And if you’re doing it correctly, you will see that it will be changing from default font to custom font.
Now save it.
Refresh the page/post. And it’s done!
Optional Things to remember
- This custom font installation practiced on Divi Theme.
- You can also buy any font plugin.
- You can create new custom-font folder or you can also extract the custom font into already existed font’s folder. If you uploaded the font files, then you don’t need to add @font-face in style.css file. I mean you can skip the 2nd
- If you want add multiple custom fonts. You can use following methods.
Font-family: Add your custom-font name here, custom font2, custom font3, custom font 4;
- And if you want to use all above fonts in word by word. Then create and add different span class for each custom font. Such as <span class= “custom-font1”>Word1</span> <Span Class= “custom-font2”>Word2</span> etc.
- While there are Google Fonts and plugin but it is possible that your own created custom font or purchased font from online marketplaces can be install and used in WordPress very well.
- It’s not necessary that you can create a folder in your server/Cpanel/file-manager and theme folder. You can access this font from other websites too. But if you want to access the fonts from other sources, it will reduce the speed of your website. That’s why I think creating a custom folder inside the same website will be helpful.
- Yeah! You can also create or add this line in child-theme CSS. So, that will remain there after the theme is updated.
There are lots of things that I can explain here. But I think you got the point to install custom fonts that you purchased. But if still getting the problem, tell me. I will add that solution on this post or in next post related to WordPress.
If you haven’t subscribed yet, Please Enter your email id here & subscribe then verify it by visiting verification link in your mailbox, after that you will get great articles like this one automatically to your email inbox.
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?