Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Allow Custom Font Uploads In Divi (WOFF, WOFF2)

Nelson Miller Profile Orange
In this tutorial, I will provide you with two solutions to overcome the default restrictions in WordPress and allow additional custom font uploads in Divi.

Custom fonts can greatly improve the look and feel of your Divi website. Whether you’re aiming for a specific font style, need fonts not available in Google Fonts (integrated into Divi), or want to upload local fonts for GDPR compliance (covered in a follow-up post about local fonts in Divi Assistant), you may encounter errors when trying to upload unsupported font files due to WordPress’s default security restrictions. In this tutorial, I will provide you with two solutions to overcome the default restrictions in WordPress and allow additional custom font uploads in Divi.

▶️ Please watch the video above to get all the exciting details! 👆

Understanding the Error

When you attempt to upload a custom font in Divi, you might encounter an error message like:

“Unsupported File Format. Supported File Formats: ttf, otf”

Font upload interface with file format error message

Why This Error Occurs

WordPress, the content management system (CMS) that Divi runs on, restricts certain file types for security reasons. By default, it only allows specific file formats such as images, documents, audio, video, and others. However, custom font files like .woff and .woff2 are often blocked to prevent potential security vulnerabilities.

Choosing A Solution: Code Snippet Or Plugin

By following either of the methods mentioned below in this tutorial, you can easily upload custom fonts in Divi. The code snippet method is ideal for those comfortable with coding, while the Divi Assistant plugin offers a hassle-free, user-friendly alternative. Choose the method that best fits your needs and enjoy the creative freedom of using custom fonts on your Divi website! 

After adding support with the method described below, you will now be able to upload additional .woff and .woff2 font formats, as shown in the screenshot.

Font upload interface showing supported file formats

Solution 1: Using A Code Snippet

You can bypass this restriction by adding a code snippet to your WordPress site’s functions.php file. This will allow the upload of custom font files. Be sure to check our suggested method for adding PHP to your site. Remember, adding and modifying PHP requires careful attention to detail to avoid errors on your site.

Where To Paste The PHP Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.

global $da_allowed_mimes;
$da_allowed_mimes = ['ttf' => 'application/x-font-ttf','otf' => 'application/x-font-otf','woff' => 'application/x-font-woff','woff2' => 'application/x-font-woff2'];

/**
 * Allow Custom Mime
 *
 * @param $mimes
 *
 * @return mixed
 */
if (!function_exists('pac_da_upload_mimes')):
    function pac_da_upload_mimes($mimes)
    {
        global $da_allowed_mimes;
        foreach ($da_allowed_mimes as $key => $val) {
            $mimes[$key] = $val;
        }

        return $mimes;
    }
endif;


/**
 * Allow Divi To Upload Fonts Format
 *
 * @return string[]
 */
if (!function_exists('pac_da_filter_divi_supportedt_font_formats')):
    function pac_da_filter_divi_supportedt_font_formats()
    {
        return ['otf', 'woff', 'woff2', 'ttf'];
    }

    add_filter('et_pb_supported_font_formats', 'pac_da_filter_divi_supportedt_font_formats', 999);
endif;

/**
 * Fixes the issue in WordPress 4.7.1 being unable to correctly identify type
 *
 * @param $file
 * @param $tmp_file
 * @param $filename
 * @param $mimes
 *
 * @return array|mixed|null
 */
if (!function_exists('pac_da_fix_mime_type_ext')):
    function pac_da_fix_mime_type_ext($file, $tmp_file, $filename, $mimes)
    {
        // Get File Ext.
        if (isset($file['ext']) && empty($file['ext'])) {
            $file_ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
            // Set File Ext.
            global $da_allowed_mimes;
            foreach ($da_allowed_mimes as $key => $val) {
                if ($key === $file_ext) {
                    $file['ext'] = $key;
                    $file['type'] = $val;
                }
            }
        }

        return $file;
    }
endif;
if (current_user_can('administrator')) {
    add_filter('upload_mimes', 'pac_da_upload_mimes');
    add_filter('wp_check_filetype_and_ext', 'pac_da_fix_mime_type_ext', 75, 4);
}

Code Explanation

This code snippet modifies how WordPress handles font file uploads for Divi websites. It allows you to upload custom font files such as .ttf, .otf, .woff, and .woff2, which are typically restricted for security reasons. By adding these file types to the allowed MIME types and ensuring correct file type detection, the snippet ensures that Divi can recognize and use these custom fonts properly. 

Screenshot of WordPress font upload settings with enabled toggle
Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

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

Recent Posts

0

Your Cart