How to Add WOFF/WOFF2 Custom Fonts to the Divi Builder

by | 20th October 2020

Divi recently disabled the ability to upload WOFF & WOFF2 webfont files in the Divi Builder custom font Drag & Dropload box due to “security reasons”.

Example: I can’t upload WOFF / EOT / SVG font files in Divi

New Method to Add WOFF & WOFF2 Fonts to the Divi Builder:

  1. Convert Your Font Files to WOFF & WOFF2
    Using WOFF & WOFF2 together means your font will be almost universally supported by browsers so take your old TTF files and convert them using CloudConvert.
  2. Find the functions.php File & Make a Backup
    Locate the functions.php file in your Divi theme folder or Divi child theme folder if you’re using one. Download a backup copy of it to your computer just in case!
  3. Add Some Code to Your functions.php File
    Copy and paste the following code into your functions.php and save the changes.
    /* Mime Types Support */
    add_filter('upload_mimes', 'custom_mime_types', 999999);
    
    function custom_mime_types($mimes) {
      $mimes['otf'] = 'application/x-font-opentype';
      $mimes['woff'] = 'application/font-woff';
      $mimes['woff2'] = 'application/font-woff2';
      return $mimes;
    }
    
    /* Custom Font Types Support */
    add_filter('et_pb_supported_font_formats', 'custom_font_formats', 1);
    
    function custom_font_formats() { 
    return array('otf', 'woff', 'woff2');
    }
  4. Upload the Fonts Together via the Divi Builder
    Now go back into the Divi Builder and upload the fonts in the normal way. Make sure you select the WOFF file and the WOFF2 file when you upload them:
    Divi custom font WOFF files
    Your WOFF fonts should now be uploaded and working so save and exit the Divi Builder.
  5. Go Back & Undo the Changes to the functions.php File
    If you’re all done and the new fonts are working then you can remove the code you copied into the functions.php file in step 3.

Thanks to @lukebussey for writing the code and Nordie for sharing it in the comments!

Old Method to Add WOFF & WOFF2 Fonts to the Divi Builder:

  1. Convert Your Font Files to WOFF & WOFF2
    Using WOFF & WOFF2 together means your font will be almost universally supported by browsers so take your old TTF files and convert them using CloudConvert.
  2. Find the core.php File & Make a Backup
    Find the wp-content/themes/Divi/includes/builder/core.php file in your website’s file system. Download a backup copy to your computer just in case.
  3. Find the Function That is Stopping WOFF & WOFF2 Uploads
    Open the core.php file and search for this function:
    function et_pb_get_supported_font_formats() { return apply_filters('et_pb_supported_font_formats', array('ttf', 'otf')); }
    Divi uses this function when uploading new fonts. As you can see it is currently set to only allow OTF and TTF fonts.
  4. Temporarily Update the Divi Core to Allow WOFF & WOFF2 Uploads
    Add the WOFF and WOFF2 formats to the array and save the file. It should look something like this:
    function et_pb_get_supported_font_formats() { return apply_filters('et_pb_supported_font_formats', array('ttf', 'otf', 'woff', 'woff2')); }
  5. Upload the Fonts Together via the Divi Builder
    Now go back into the Divi Builder and upload the fonts in the normal way. Make sure you select the WOFF file and the WOFF2 file when you upload them:
    Divi custom font WOFF files
    Your WOFF fonts should now be uploaded and working so save and exit the Divi Builder.
  6. Go Back & Undo the Changes to the core.php File
    Find the core.php file and remove WOFF and WOFF2 items from the array and save it so it looks like this again:
    function et_pb_get_supported_font_formats() { return apply_filters('et_pb_supported_font_formats', array('ttf', 'otf')); }
Need Divi Help?
Get in touch…
I work on all kinds of Divi sites, improve Divi loading speeds & build custom Divi modules. If you need to hire Divi help then get in touch!

21 Comments

  1. Balaka

    THANK YOU!!!

    Seriously, thank you so much for this. This is by FAR the best solution I have come across. So good to finally solve this problem once and for all.

    Reply
  2. Betsy Pruitt

    This is fantastic and so easy! Thank you so much!

    Reply
  3. Angelique Berger

    Is there anything different to this process if you have a child theme on top of the Divi theme? Thanks so much!

    Reply
    • Alex Hooley

      Should work exactly the same Angelique!

      Reply
      • Dan Gracey

        For a child theme, you should place the core.php in your child-theme’s folder and make the update there. It will override the core file in the Divi folder. Never edit files in the Divi folder, they will be lost when you update. Also, couldn’t this as easily go in the functions.php of the child theme?

        Reply
  4. Nadia

    I can not find this function in the core.php. Maybe something changed after a update?

    Reply
    • Alex Hooley

      Hi Nadia, it’s still there for me in core.php in Divi 4.9.3 on line 5302.

      Reply
  5. MD

    Umm, yes, this worked great! Thanks a mill!

    Reply
  6. Christian Balta

    Hi

    I’ve done the steps but my Font is only visible in the Visual Builder. As soon as i exit the Visual Builder the font is gone.

    Any idea?

    Thanks!
    Christian

    Reply
    • Alex Hooley

      Hi Christian, any errors in your browser console? Is the font loading in the “Network” tab of your browser console?

      Reply
  7. Nordie

    i like this
    would there be an option to ad this n some shape of form in to the functions.php file?

    Reply
    • Alex Hooley

      Looks good, I’ll add it to the post. Thanks Nordie!

      Reply
    • Elke

      Best solution for me! Smart and fast: Thanks a lot!

      Reply
  8. Luis

    Thanks so much, you made my day.

    Reply
  9. Vincent

    I already use 3 .ttf fonts that I uploaded in Divi. They are used on hundreds of pages on my site. I cannot change all the fonts of my texts on all my pages one by one. Is there a solution to force the ttf to woff2 everywhere?

    Reply
  10. Gary

    Excellent work, thanks for this!

    Reply
  11. Kathryn

    I’m sure the problem is on my end, but when I try to add in the php function, sends this error message:
    Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over FTP.
    (using a child theme but as mentioned, it should work exactly the same)
    Any ideas?
    Thanks!
    Kathryn

    Reply
    • Alex Hooley

      Hi Kathryn, is that an error message you’re seeing in Divi or something to do with your hosting?

      Reply

Submit a Comment

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