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”
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.
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);
}
How To Allow Custom Font Uploads Using Divi Assistant
Here are the simple steps to allow custom font uploads in Divi using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Fonts Helper Helper tab and the Allow More Font Types subtab
- Enable the setting
I hope that is easy enough for you! 😉
0 Comments