Adding Custom Fonts to Your Divi Website

by | Tutorials

While Divi is one of the most flexible WordPress themes available, it is not without its shortcomings. One area where it falls short is its limited availability of usable fonts. Even though Divi comes preloaded with over 80+ Google Fonts, it pales in comparison to the 800+ fonts that are currently available.

There are many ways to increase the number of Google Fonts through custom CSS or plugins such as WP Google Fonts or Easy Google Fonts. But what if your font of choice is not available in the Google Font library? How do you integrate that really cool font you found into your website?

The first step in embedding a font into Divi is to pick one you like. For the purposes of this tutorial, I will be using Nexa Bold, which is one of my favorite sans serif fonts that I use on my website for the header titles. In order to use the font for your website, you will have to convert it into the several file types: OTF, SVG, TTF, WOFF, and WOFF2. This is done to ensure maximum compatibility across various browsers and mobile devices. There are many online tools that can convert a font into the proper formats — one of my personal favorites is the Font Squirrel Webfont Generator.

Getting started with font conversion

Step 1

Navigate to the Font Squirrel Webfont Generator and click on the UPLOAD FONTS button to select your font for conversion. Next, select one of the 3 conversion options: Basic, Optimal, or Expert. By default, the tool is set to Optimal and will only convert the font into the WOFF and WOFF2 formats which cover most modern browsers. Because we want maximum compatibility across older browsers as a precaution, we will need to select the Expert option to convert the font into additional formats.

Step 2

After selecting the Expert option, move down to the Font Format section and check the following boxes: TrueType, EOT Compressed, and SVG. These additional formats are necessary to ensure that the font displays properly in older versions of web browsers such as Internet Explorer, Safari, and iOS Safari. The other settings you see are for users who need specific formatting options. For the purposes of this tutorial, the default settings are sufficient.

Once you have selected the additional options, move to the Agreement section and check the box next to the legal agreement. Press the DOWNLOAD YOUR KIT button once it appears.

Step 3

Once your kit is downloaded, extract the .zip file and open the folder. Inside, you will see a subfolder and several font files for use. These files have been automatically renamed for usage and consistency purposes. For example, the converter will create a WOFF and a WOFF2 file for the Nexa Bold font named nexa_bold-webfont.woff and nexa_bold-webfont.woff2, respectively.

Step 4

After extracting the files, create a new folder and give it a name — for the tutorial, let’s simply name it fonts. Place the TrueType, EOT Compressed, WOFF, WOFF2, and SVG font files in the folder and upload them to your website directory. This folder can be in any location, but I have found that placing it within the WordPress installation directory works best.

Step 5

For the purposes of this tutorial, I will be uploading the fonts into the folder for my WordPress child theme. Navigate to the themes directory of your WordPress installation and upload the fonts folder. In this example, the folder will be in the following location:


Once this is completed, you will be able to use CSS to load the fonts for use in your website.

Loading fonts using the @font-face rule

Step 6

In your WordPress Dashboard, go to Divi > Theme Options and scroll down to the Custom CSS section. Input the following CSS code snippet.
Code Snippet

@font-face {
font-family: ‘nexa_bold-webfont’;
src: url(‘/wp-content/themes/Divi-Child-Theme/fonts/nexa_bold-webfont.eot’);
src: url(‘/wp-content/themes/Divi-Child-Theme/fonts/nexa_bold-webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘/wp-content/themes/Divi-Child-Theme/fonts/nexa_bold-webfont.woff2’) format(‘woff2’), /* Modern Browsers w/compression */
url(‘/wp-content/themes/Divi-Child-Theme/fonts/nexa_bold-webfont.woff’) format(‘woff’), /* Modern Browsers */
url(‘/wp-content/themes/Divi-Child-Theme/fonts/nexa_bold-webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘/wp-content/themes/Divi-Child-Theme/fonts/nexa_bold-webfont.svg#nexa_bold-webfont’) format(‘svg’);
font-weight: normal;
font-style: normal;


Step 7

After inputting the code snippet, you will need to modify the urls to target the location of each font in the fonts folder you uploaded. It is very important that the path is exactly correct otherwise, you will not be able to call the font using CSS classes. The type of path you use is determined by whether you are running a local WordPress installation (absolute path) or a hosted installation (relative path). Since we are working on a hosted installation, we will be using a relative path that looks something like this:


In this example, the path starts from the location of the root directory for the WordPress installation and begins in the wp-content folder. Since the CSS references multiple fonts for maximum compatibility, you will need to change the path six times for each source url. Afterward, remember to save the changes.

Step 8

With your newly loaded font, you are ready to create CSS classes to use in your Divi modules. As an example, we will be creating a class to use the Nexa Bold font in the hero images for our website. Copy the following code snippet into the Custom CSS section of the Divi Theme Options:
Code Snippet

.heroTitle h1 {
font-family: ‘nexa_bold-webfont’, sans-serif;

Step 9

Create a Text Module in your page or post and go to the Content section of the General Settings tab. Next, select the Heading 1 tag from the dropdown menu in the editor and type in the text you wish to display. Then go to the Custom CSS tab and type in the name of the class you have created in the field for CSS Class. In this example, the name of the class would be heroTitle. Save the Text Module and click the Preview button in the WordPress sidebar.

Step 10

You should now see your custom font displayed on your website. Because the Text Module has built-in controls for font styling, you can change elements such as font size, color, and spacing without having to write specific CSS code for the class itself. Just be sure to use the controls for Header under the Advanced Design Settings tab. Since the class only affects the h1 tag, the controls for Font will not work. I find this method extremely useful as it cuts down on the amount of CSS you have to write and makes it easier to duplicate the module when added to the Divi Library.