How to Add Custom Fonts to Divi

Post By : Jim Monkhouse
Adding custom fonts to websites can be a pain. Learn how easy it can be to install custom fonts to the Divi wordpress theme with my step by step tutorial.
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-add-custom-fonts-to-divi-font-uploader

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.

  1. Always backup your website before performing and edits to your files
  2. Download your font in the correct format
  3. Enable the Divi builder on a page
  4. Select the Use text module
  5. Edit the text
  6. Select the design tab and choose the font family and then upload
  7. drag the font file onto the uploader and then give the font a name
  8. and that should be it!
  9. 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.

    1. 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.
    2. Download the file-manager plugin. This will give you quick access to the website files and we need to edit to allow permissions.
    3. 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.
    4. Click Edit and paste the following code into the bottom of the config file and approve.

    define('ALLOW_UNFILTERED_UPLOADS', true);


    1. Now try the font install process again and it should upload your font.
    2. 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.
    3. 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.

Whilst you’re here can I ask a quick favour?

If you found this this post helped in any way , feel free to tap the like button ion my accompanying youtube video. it’ll cost you nothing and really helps me get these tutorials out to more people like you.

I hope that this tutorial helps you create something awesome, subscribe or sign up to my newsletter to stay informed and have a great day!

How to add custom Icons to Divi’s social media module

How to add custom Icons to Divi’s social media module

We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module

Five Stunning Feminine Divi Layouts

Five Stunning Feminine Divi Layouts

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.

Jim Monkhouse
Jim is a web designer & developer with over seven years experience building websites for small business using the wordpress theme

Did you find this post valuable? If so, please consider sharing to help me, help more people

More Posts

How to add custom Icons to Divi’s social media module

How to add custom Icons to Divi’s social media module

We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *