How to Add Custom Fonts to Divi
Introduction to custom fonts for Divi
The Divi WordPress theme already comes fully loaded with Google fonts , which are an incredible free resource and usually offer more than enough choice for most websites. However if you’re after a more custom look to your website design, you might want to install and use a custom web font for your Divi website.
What font file font formats to use with the Divi font uploader
The Divi font upload functionality requires otf or ttf font formats. So as long as your custom font has these formats, you’re all good. Here’s a link to an article on font file formats if you need to understand more about these formats, here’s a link
How to install the fonts on the Divi wordpress theme
So how do we install custom fonts on the Divi theme? The process is actually quite simple, and should take no more than 5 minutes.
- Always backup your website before performing and edits to your files
- Download your font in the correct format
- Enable the Divi builder on a page
- Select the Use text module
- Edit the text
- Select the design tab and choose the font family and then upload
- drag the font file onto the uploader and then give the font a name
- and that should be it!
- Shouldn’t it? The fact of the matter is that’s probably not it and you’re going to run into an issue. But fortunately it’s easy to get round.
Possible problems you could run into with the Divi font uploader and how to overcome
The main issue that you will most likely run into is wordpress not accepting the font in the file uploader. This is usually to do with wordpress triggering a security measure designed to protect your website and prevent you uploading malicious files which could break your website or give access to hackers.
The solution I use is to temporarily change the upload permissions and then upload the font. Sounds technical but is actually easy with the help of a plugin. Just follow along with these steps.
- I can’t stress this enough. Always backup your Divi website before making any edits. The files that we will edit in these next steps can break your website. If you’re not comfortable in editing code, please use the assistance of your hosting company or a webmaster.
- Download the file-manager plugin. This will give you quick access to the website files and we need to edit to allow permissions.
- Once downloaded. Open the files and navigate to wp-config.php. Download a copy of this file to your desktop. We will need this when we change the config file back to its default state.
- Click Edit and paste the following code into the bottom of the config file and approve.
- Now try the font install process again and it should upload your font.
- Once this is done and your fonts available on the font drop down. it’s time to remove the permissions from the config for security purposes. You can do this by dragging and dropping your original copy of the wp-config.php file on top of the file manager window and it should overwrite.
- Delete your file manager plugin. Too many unnecessary plugins cause bloat on your Divi Website, so it’s always best to remove plugins where you can.
Summary of uploading fonts with Divi
I hope this tutorial been useful in showing you how to upload custom fonts on to the Divi wordpress theme . As always, if you have any questions, leave a comment below and I’ll get back to you. Also check out my youtube video if you want to see my Youtube walkthrough video on how to upload fonts.
Did you find this post valuable? If so, please consider sharing to help me, help more people
Today I’m going to show you how simple it is to create social share buttons for the Divi Wordpress Theme, without having to install “yet another” plugin.
We all know that Divi can create amazing small business websites, but clean, magazine style feminine layouts are usually the preserve of Squarespace. Here’s a list of five stunning feminine wordpress Divi Layouts that gives squarespace a run for its money.
Want to learn how to create a neat inline email optin for your Divi Website? All it takes is copying and pasting a few lines of CSS code. Read below to learn how,