Divi custom fonts are a problem

The problem: Divi custom fonts implementation generates errors

If you want to host fonts locally and use the Divi theme for WordPress, then the path of least resistance is to use Divi custom fonts. If you’re willing to live with the limitations of Divi custom fonts (which are significant and surprising), then they work. But they’re not the easiest to use.

Sure, you can find lots of articles on the Internet about how to use fonts in the Divi theme for WordPress. They say you can “simply” do this or that to host fonts locally with Divi custom fonts. But in my opinion there’s nothing simple about them—especially compared to other themes. For example, with WordPress 6.5+ you can host any font locally using the out-of-the-box themes like TwentyTwentyFour, or any of the other newer block themes that support WordPress’ Font Gallery.

In this article I focus on how the Divi theme for WordPress handles fonts, specifically locally hosted fonts—Divi custom fonts. This is important, because how you handle fonts in a website impacts performance, SEO rankings, and legal obligations.

Why should photographers care about this?

Photographers need a website to showcase their work and take ownership of the relationship with their visitors (see my previous article about this). Photographers, like everyone, need a green website that complies with legal obligations wherever someone views their site, like the European Union and it’s GDPR.

If you hire someone to create a website for you, as a basic business matter you should make sure you understand how the website designer approaches their work. What tools they use, what processes they follow. You want to confirm that they use efficient tools and best-practice generally so they don’t waste their time and yours.

In this article I explore some of how not to host fonts locally on a website, specifically Divi custom fonts as the example culprit. I also highlight some of the better ways website designers can work with less effort, and lower cost to you as their client.

Why am I writing about this?

I come at the subject of Divi custom fonts—and how Divi implements fonts generally—from the perspective of a photographer who bought a lifetime license for Divi a few years ago. I have a technical background and like to build websites for myself and my friends (not professionally). I invested in Divi because I expected to use it for many years, I trusted their commitment to keep the product updated and current with best practice.

That lifetime license wasn’t cheap. Nevertheless, after seeing Divi become slower over time, I decided for a variety of reasons to use Kadence as a WordPress builder for my website and a friend’s new website. Now I’ve dropped Kadence to use WordPress natively.

In 2021, Divi announced they had rebuilt their code from the ground up to enhance performance.

In 2023 I had some time on my hands and decided to give Divi another try to confirm for myself their performance claims. Today I focus on Divi custom fonts and how to use Divi fonts (or not) generally.

Why host fonts locally? Why not use Google-hosted fonts?

(Skip this section if you already know this stuff.)

When you load fonts locally—from your own website—you solve several problems:

• Your website performs faster because it doesn’t have to reach out to Google’s servers for the fonts. The difference may seem small, but it has a big impact on your performance and SEO scores.
• You increase the number of fonts you can choose from. Google doesn’t host all the fonts available to us. For example, a friend’s website’s headings use the Fecske font created by Roland Huse for some headings. Google doesn’t serve that font.
• You reduce your exposure to Google’s surveillance (important if you’re privacy-minded).
• You reduce the amount of information Google can collect about your visitors (again important if you’re privacy-minded).
• You reduce your obligations to warn users about cookies, which is a legal obligation everyone has if they have any exposure in the EU and other jurisdictions where privacy laws require it.

WordPress 6.5+ makes this easy with the Font Gallery in block themes.

What font file types does Divi support/require as custom fonts?

Best website practice recommends that you host fonts locally. But if you want to add custom fonts to Divi you’ll hit a snag right away. The only font file types Divi supports for uploading are forbidden by WordPress, and generate an error.

If you want to add custom fonts to Divi within the Divi editor, you must use TTF and OTF font file types. Those are the only file types Divi allows you to upload as Divi custom fonts. You can hack your way around that, but even Divi recommends you don’t.

This is surprising because TTF and OTF file types are obsolete for use on the web. They’re bloated and were designed for desktop use. Newer compressed font types like WOFF and WOFF2 have become the best-practice standard for web use.

All current browser versions support those newer file types (except Opera Mini, which doesn’t matter).

WordPress plugins that enable local hosting of fonts all support WOFF and WOFF2. It’s not a technical challenge. Divi can’t justify their refusal/neglect to support modern font files on technical grounds.

So what’s the problem with TTF and OTF font files?

Both TTF and OTF file types can include malware.

The TrueType Font (TTF) file format isn’t necessarily a security risk. But bad actors can use TTF files to exploit vulnerabilities in software that processes them. For example, in 2015 hackers used a malicious font file to spread ransomware.

The OpenType font format (OTF) is just a container format like MPEG is a container for different video/audio formats. OTF files can contain either TTF or Postscript fonts.

That’s why WordPress prevents uploading TTF and OTF files: to keep developers and visitors safe. Bypassing that safety barrier makes no sense from a security point of view. Yet that’s exactly what Divi wants us to do.

Theoretically, any font file can contain malware. But WOFF and WOFF2 are still preferable because they’re smaller and perform better on the web. Even so, beware! Whenever you’re hosting fonts locally, always make sure the fonts you use on a website come from a reputable source.

Divi wants us to jump through hoops to use obsolete font files

TTF and OTF are legacy formats. They’ve been relegated (deprecated) by the WordPress development team as security threats.

I assume Divi only supports those legacy, deprecated file types custom fonts in order to cater to legacy (aka obsolete) browsers that someone somewhere might still use.

But since WOFF and WOFF2 are supported by all modern browsers on all devices. I can’t think of a good business reason to support obsolete and insecure web browsers on any device. If an end user doesn’t bother to update their device to use a modern, secure browser … not my problem, that’s their risk, and not a business risk I’m willing to take. Divi forcing web designers to use deprecated file types makes no business or practical sense.

And by “forcing” I mean asking us to jump through hoops of Divi’s own devising.

Security isn’t an “error” that needs fixing.

When you try to upload a TTF or OTF font in WordPress, you get an error saying “Sorry, This File Type Is Not Permitted for Security Reasons”. Yet Divi has posted an entire article on how to work around that security precaution: “How to Fix the ‘Sorry, This File Type Is Not Permitted for Security Reasons’ Error in WordPress”:

YIKES!!!

Security isn’t an “error” that needs fixing.

The article describes the hurdles the Divi team expect us to jump over to use legacy, unsupported, potentially malicious file types as Divi custom fonts. Here are the four methods they prescribe:

1. Add permitted file types by changing WordPress multisite settings
2. Modify approved file types using a plugin
3. Use the Upload_Mimes filter by editing your theme’s functions.php file
4. Allow unfiltered uploads in your wp-config.php file

All of those methods involve extra work by the website developer (Divi’s customer).

All of them require breaking built-in security precautions in WordPress, exposing developers and visitors to unnecessary and unacceptable risk.

No other (competently developed) theme requires those actions.

There’s no excuse for this dereliction of duty by Divi.

As far as I’m concerned, it’s a showstopper. I can’t in good conscience, or my own self-interest, break WordPress security features.

Confusingly, the Divi help blog specifically recommends not to use TTF and OTF fonts, even though those are the only ones they support for uploading as custom fonts. They even use a screenshot of their own Add Custom Font feature generating an error:

How to use Divi custom fonts even if you find a way to upload them? More hoops to jump through…

Divi doesn’t just drop the ball on font security. They also make it difficult to specify fonts for headings globally, sitewide.

After you upload a Divi custom font, if you want to use it sitewide without setting it for each and every heading individually, you have to write CSS that assigns it to headings, paragraphs, whatever. Otherwise you have to assign a Divi custom font manually for each heading, paragraph, whatever. Even Divi doesn’t recommend that piecemeal approach.

Other themes, like Kadence, make sitewide font styling much easier. In Kadence and other themes, you can assign sitewide heading fonts via the WordPress appearance customiser (Appearance > Customise > Colours & Fonts > Typography):

That’s much easier than writing CSS, especially because you get immediate visual feedback about how the headings look as you change font settings.

Divi should take a cue from their competition and make font handling easier and more secure.

FAQ

What are Divi custom fonts?

Divi “custom” fonts are the method used to host fonts locally in the Divi theme for WordPress.

Are Divi custom fonts different from Google fonts?

Yes and no. When we talk about “Divi custom fonts” we mean fonts you upload yourself through the Divi custom font button. Divi custom fonts are hosted locally, on your website, regardless of where they come from. You can use Google fonts as Divi custom fonts if you want to host Google fonts locally. Or you can use fonts from other sources than Google as Divi custom fonts. It’s up to you.

What are Google fonts?

The term “Google fonts” refers to any font that Google makes available in their font library. You can let Google host the font for you, in which case your website has a link to the live Google fonts library. Or you can copy the Google font files to your own computer, then upload them to your website to host them locally.

Is it better to host fonts locally on my own website?

Generally speaking, yes. Loading fonts locally speeds up your website and your visitors enjoy a quicker experience. A faster website enjoys better SEO rankings. Locally hosted fonts reduce the risk of a link to the Google font library not working, or being prohibited by a visitor’s organisation. WordPress 6.5+ makes it easy with the Font Gallery option.

What kinds of fonts can you upload as Divi custom fonts?

Divi only supports TTF and OTF fonts for uploading as Divi custom fonts. Unfortunately, those font file types were designed for desktop use, not on the web: they’re bloated and obsolete web-wise. The Divi WordPress theme doesn’t support uploading modern, compressed, designed-for-web font file types like WOFF and WOFF2.

Are Divi custom fonts good or bad?

They’re bad because:

1. Divi only supports uploading obsolete, bloated file types as Divi custom fonts (TTF and OTF).
2. WordPress doesn’t allow those file types to be uploaded due to security risks.
3. To upload a font file type that Divi supports, you must bypass WordPress’ security filters. It’s always a very bad idea to bypass security precautions. They’re there for a reason: the WordPress development team analysed the issue carefully and decided that safety counts more than supporting obsolete file types. (Makes sense, yes?)
4. You’d need to install a plugin to bypass WordPress security filters, and/or edit backend files on your website manually. Adding plugins impacts your website’s performance and increases risk that the plugin might have its own security vulnerabilities. Mistakes when editing critical backend files can make your website unusable.

What’s the alternative to using Divi custom fonts?

You have several options:

1. Use a different WordPress theme that makes it easier to use modern, web-focused fonts.
2. Use a plug-in that helps you upload and make available fonts that Divi can use.
3. Edit back-end files and CSS files to force Divi to recognise your locally hosted fonts (advanced users only!).

What do you think?

Do you have any questions or thoughts you want to share? Comment below!