Custom fonts can greatly enhance the design and branding of your website. However, you might encounter issues when trying to upload WOFF, WOFF2, and SVG font files in Divi due to security restrictions.
In this article, we will guide you through the process of enabling the upload of these font file types in Divi.
WordPress does not allow the upload of WOFF, WOFF2, and SVG files by default for several key reasons related to security and compatibility:
Security Concerns:
SVG Files: SVG (Scalable Vector Graphics) files can contain JavaScript, which poses a significant security risk. Malicious code can be embedded within SVG files, potentially leading to cross-site scripting (XSS) attacks. Allowing unrestricted upload of SVG files could expose WordPress sites to vulnerabilities
WOFF and WOFF2 Files: These font files can also pose security risks, though they are less commonly exploited than SVG files. The concern is primarily around ensuring these files do not contain malicious code or lead to security vulnerabilities.
Compatibility Issues:
WordPress aims to maintain compatibility across different hosting environments and setups. Allowing uploads of certain file types that might not be supported on all servers or by all browsers could cause inconsistencies and issues for some users.
Default Settings for Simplification:
By restricting certain file types, WordPress simplifies the default setup, making it easier for less technical users to manage their sites without worrying about potential security or compatibility issues
WordPress offers several solutions to mitigate these issues while still allowing advanced users to upload these file types, such as plugins that can sanitize SVG files or adjust settings to allow specific file types to be uploaded safely.
Since Divi is also a WordPress theme, those restrictions are automatically inherited from WordPress core.
Allow the upload of SVG files
Go to WordPress Dashboard → Plugins → Add New Plugin
Install and active the SVG Support plugin
Allow the upload of SVG, WOFF, and WOFF2 font files
Go to WordPress Dashboard → Plugins → Add New Plugin
Install and active the Code Snippets plugin
Go to Snippets → Add new
Set a title for the new snippet, for example, Allow Woff Upload
Add this PHP snippet
function custom_mime_types($mimes) {
// Add new MIME types
$mimes['svg'] = 'image/svg+xml';
$mimes['woff'] = 'font/woff';
$mimes['woff2'] = 'font/woff2';
return $mimes;
}
add_filter('upload_mimes', 'custom_mime_types');
Important Note: The above solutions will allow you to upload those restricted file types directly to your WordPress Media library.
However, because those are actually WordPress core restrictions, uploading and using custom WOFF or WOFF2 font files will not be possible in Divi, and the following error will appear when those restricted font files are being uploaded:
Note: It's recommended to disable the above plugin or code after you've finished uploading your custom fonts to reduce security risks.