The Divi integration with Google Fonts offers tons of font options you can add to your design. But if you already know the font you want to use on your design, you may want to install a custom font instead to speed up your design process. In this post, I will show you how to properly install and use a custom font in Divi.
Divi, as you may already know, has a native feature to add custom fonts. However, the process of adding a custom font is a bit complex as Divi has no font manager feature like, for instance, Elementor. Instead of offering a dedicated feature to manage fonts, Divi requires you to add a custom font directly from its visual editor (Divi Builder).
Before jumping to the technical section, let’s figure out why using a custom font can be beneficial.
Jump to the technical steps 👇🏻
Why Using a Custom Font? Two Main Benefits
There are two perspectives of using a custom font in Divi: from the design process perspective and from the site performance perspective.
From the design process perspective, using a custom font can speed up your process by eliminating the fonts you don’t need from the list. Picking a font out tens (or even less) is way easier than picking a font out of hundreds. Right?
While for the site performance perspective, using a custom font can help reducing HTML requests to a third-party server.
When you use a custom font in Divi, the actual file of the font is hosted locally on your own hosting server. This means, an HTML request is not made to the Google CDN server like when you use a font from Google Fonts directly via the Divi integration. This practice can save page load time by about 910 ms as you can see on the screenshot below.
Preparation
Two crucial things you need to know before you install and use a custom font in Divi. First, Divi supports only static font in the form of TTF file. So, if the font you want to install consists of multuple variations, you need to upload all of the files of the variations.
Second, Divi has no native feature to allow TTF file upload in WordPress. For your information, TTF is one of the file types that is not allowed in WordPress by default, other than SVG. To be able to upload a TTF file, you need to add the following code snippet.
add_filter('upload_mimes', 'add_custom_upload_mimes');
function add_custom_upload_mimes($existing_mimes) {
$existing_mimes['ttf'] = 'application/x-font-ttf';
return $existing_mimes;
}You can add the above snippet to the functions.php file of your Divi theme (or child theme if you use it). On your WordPress dashboard, go to Appearance -> Theme File Editor. Select the functions.php file on the right panel to edit it.
Paste the above snippet right after the last line of the content of the functions.php file. Don’t forget the click the Update File button to apply the snippet.
If you keep seeing an error message when attempting to add a custom font in Divi after adding the above snippet, you can edit the wp-config.php file of your WordPress site and add the following line.
define('ALLOW_UNFILTERED_UPLOADS', true);You can find the wp-config.php file under the root directory of your WordPress installation. Here is an example of the line placement.
The above line will enable unfiltered file uploads on your WordPress site, which may not good for security. So, you can remove the line after adding your custom font.
Disable Google Fonts
Since you want to use a custom font on your Divi website, you can disable Google Fonts first. To do so, go to Divi -> Theme Options on your WordPress dashboard. Under the General tab, scroll down to the Use Google Fonts option and disable it.
Get the Font Files Ready
Before you can install your custom font, you need to have the files of the font you want to install. As stated above, Divi supports only static font (TTF). So, make sure the font file you want to install is available in a TTF format (.ttf).
If your font consists of multiple variations, you need to upload all of the font variation files, without any exception. In this context, the term “variant” can refer to the tickness (weight) of the font or a certain style like italic. The Inter font, for instance, consists of the following variations:
- Thin: 100
- Extra Light: 200
- Light: 00
- Regular: 400
- Medium: 500
- Semi Bold: 600
- Bold: 700
- Extra Bold: 800
- Black: 900
Some websites you can visit to get the font files are:
Start Installing the Font
Once everything is ready, you can start the installation process of your font. Start by editing a page with Divi visual builder a.k.a. Divi Builder. Add a module that has a text element (e.g., the Heading module). Go to the Design tab on the settings panel and open the Heading Text settings block. Click the dropdown and click the UPLOAD button.
On the appearing dialog, give the font variation a name (e.g., Inter Thin 100). Click the CHOOSE FONT FILES button to select the TTF file of the font and click the Upload button.
Repeat the above steps to upload the files of other font variations. Here is example of font variations I have on my website.
Your custom font is now ready to use. You can use it on any Divi module that has a text element. From Heading, Text Editor, Call to Action, Blurb, and so on.
If you want to delete a certain font, you can simply click the trash can icon on the font you want to delete.
Extra Tip
If you use the theme builder feature of Divi to create a custom template for single post, you can use the bold variation of your font for the bold text to make it more distinguishable to normal text in the post content body. Here is an example.
Edit your custom template and select the Post Content module. Go to the Advanced tab and open the Custom CSS block. Paste the following CSS snippet on the Free-Form tab of within the Custom CSS block.
The snippet:
selector strong{
font-family:"Inter Bold 700";
}Tailor the font name value on the font-family property according the font variation name of your bold font variation.
Summary
Using a custom font is a smart decision when building a WordPress website with Divi. Not only it can speed up your design process, but it can also help improve your site performance by reducing HTML requests to external servers.
Although Divi has a native feature to use a custom font, the installation process is a bit complicated compared to Elementor and even Breakdance. You need to allow TTF file upload on your WordPress first and upload every single file of font variations since Divi supports only statif font. Some plugins like Divi Pixel has a handy feature to allow TTF file upload if do things manually look scary for you.
