How to Add Custom Fonts to Divi

Are you looking to elevate your Divi site’s design by adding custom fonts? You can add custom fonts to Divi using the built-in Divi Builder, a plugin, or custom CSS. This guide will show you all three methods step-by-step, ensuring your fonts are styled seamlessly across your site.

Whether you’re a seasoned Divi user or just starting, this guide will help you customize your typography, enhance your branding, and fix common issues—all without feeling overwhelmed.

Why Add Custom Fonts to Divi?

Custom fonts allow you to:

• Stand out with unique typography tailored to your brand.
• Enhance readability for a better user experience.
• Go beyond Divi’s built-in library, which includes 800+ fonts, but might need more specific options for niche branding.

Method 1: Adding Custom Fonts Directly in Divi Builder

This is the easiest way to upload and use a custom font without additional tools.

Steps:

1. Open a Text Module:
2. In Divi Builder, select a text module where you want the custom font applied.
3. Go to the Design Tab:
4. Navigate to the “Text Font” option and click on the Upload button.
5. Upload the Font File:
6. Choose a supported file format (OTF, TTF, WOFF) and upload it.
7. Name and Save the Font:
8. Assign a name to your font, and it will appear in your font library.

Common Issues:

• If you encounter the error: “Sorry, you are not allowed to upload this file type,” add this code to your wp-config.php file:

define('ALLOW_UNFILTERED_UPLOADS', true);

Ensure your font is optimized by uploading both OTF and TTF formats for browser compatibility.

Method 2: Adding Custom Fonts Using Plugins

If you prefer plugins, the Use Any Font plugin is a reliable option.

Steps:

1. Install the Plugin:
2. Download and activate the Use Any Font plugin from the WordPress repository.
3. Generate API Key:
4. Follow the plugin’s setup instructions to generate and add your API key.
5. Upload the Font File:
6. Go to the plugin settings, upload your font, and assign it to Divi modules or specific CSS selectors.

Pros:

• No manual CSS coding is required.
• Easier for beginners.

Cons:

• Additional plugins can slow down your site.

Method 3: Adding Fonts via Custom CSS

For advanced users, CSS offers flexibility and precise control over your fonts.

Steps:

1. Upload the Font to Your Site:
   • Use FTP or the WordPress Media Library to upload the font files.
   • Ensure files are in OTF/TTF format or convert them using tools like Font Squirrel.
2. Declare the Font in CSS:

@font-face {
    font-family: 'CustomFontName';
    src: url('path-to-your-font-file.woff2') format('woff2'),
         url('path-to-your-font-file.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

1. Add this code to your site’s custom CSS (via Theme Options > Custom CSS or a child theme):

Apply the Font:

Use CSS to target elements:

h1, h2, h3 {
    font-family: 'CustomFontName', sans-serif;
}

Advantages:

• Full customization.
• Ideal for applying fonts globally.

Best Practices for Using Custom Fonts in Divi

• Optimize for Speed: Minimize the number of fonts and file sizes.
• Test Responsiveness: Ensure your fonts display well on all devices.
• Maintain Branding: Stick to 1-2 fonts for cohesive design.

Troubleshooting Tips

1. Fonts Not Displaying?
   • Check if font formats are uploaded correctly.
   • Test in multiple browsers.
2. WordPress Blocking Uploads?
   • Use the ALLOW_UNFILTERED_UPLOADS code snippet mentioned earlier.

Conclusion

Adding custom fonts to Divi is a simple yet powerful way to enhance your site. Whether you use the built-in tools, plugins, or CSS, custom fonts can transform your website’s design and improve user engagement. If you face any challenges, refer to this guide or share your queries in the comments.

Start customizing your Divi fonts today and make your site truly stand out!

Digital Assets

See all author post