My users are observant people. One of my loyal users recently made me aware of the fact that Elementor Pro 3.24 introduced Variable Fonts support in their Custom Fonts feature. So, I was asked to compare the free version of OMGF to this shiny new feature. And as always; you ask, I deliver.
Table of Contents
What’s Elementor Custom Fonts?
Custom Fonts has been part of Elementor Pro for years. As they put it, it’s their way to:
Remain GDPR compliant with Custom Fonts that let you disable Google Fonts from your website.
Although Custom Fonts allows you to host more than just Google Fonts, they chose to market it as their solution to “remain GDPR compliant” and “disable Google Fonts”. Understandable, it’s a hot topic. I’m not sure it’s a smart move, though.
Either way, Elementor Pro now allows you to upload and host Variable font files, so you won’t have to rely on external Google Fonts in your Elementor pages.
Finally, some might say. Because Variable Fonts offers tons of benefits over Static Fonts, and since the scare of 2022, you basically have no other option than locally hosting your Google Fonts.
Static Fonts support in Elementor Pro has been around since 2018. So, in terms of GDPR compliance nothing’s changed.
In terms of performance, however, Variable Fonts is a game changer. So, I was surprised to see that Elementor Pro finally decided to support it as well.
As the developer of OMGF and OMGF Pro you might say I’m biased. At some points in the review I might come across as a smart ass. Please know that’s all in good fun. As always, I only show my opinion where it’s appropriate (e.g. in terms of UX) and I won’t make bold statements without proof. That’s a promise — and no, I didn’t have my fingers crossed!
Excel at one thing or be average across the board?
It’s been 5 years since I created OMGF and OMGF Pro and I’ve gotten more “competition” in terms of Google Fonts optimization since its inception.
I put competition in quotes on purpose, because none of them get it right. This is either due to the nature of the product it’s included in or, the fact that Google Fonts optimization is just a part of a package and it clearly lacks focus.
The Single Responsibility Principle
In programming, we learn about the Single Responsibility Principle, which makes your code more maintainable and basically, less buggy. The idea is simple: each piece of code (be it a class or a function) must have a single responsibility. I.e. capture user input or, validate that input or, write that input to the database. A single function shouldn’t take care of all 3. That’s the idea.
I’ve applied this principle to all my plugins, free and premium. A plugin should do one thing, and one thing only. The beauty of this ideal, IMO, is that it allows you to focus fully on that one thing and perfect it.
Now, I’m not saying OMGF and OMGF Pro are perfect. I’m currently working on OMGF v6 and OMGF Pro v4 and that is just another iteration of many to come in my quest to perfect it. I’m not saying I will ever succeed, but I’m trying.
OMGF and OMGF Pro aren’t perfect, but when it comes to Google Fonts optimization, they’re far ahead of others in terms of features.
Some examples of plugins that present themselves as one-size-fits-all solutions (and, IMO, do waaay too much) are performance optimization plugins and page builders.
I think it’s great that the Elementor team integrated a solution to host Google Fonts locally for your Elementor pages. But, it’s also painfully clear that this feature is part of a package and lacks the focus it deserves.
Elementor Pro Custom Fonts UX/UI
When I reviewed the WP Font Manager, I was blown away by its UI. It was the slickest “Custom Fonts” interface I had seen till then and it still holds up. It made installing Google Fonts easy — dare I say fun?
And then, there’s Custom Fonts.
Installing fonts in Elementor, is a tedious, time consuming task. If you care about performance, that is.
Variable Fonts support; easy, at a cost.
Elementor Pro now offers two interfaces to install your fonts: Static Fonts and Variable Fonts.
The Variable Fonts support was a surprise to me, since every other integration I reviewed failed to include that. As if it doesn’t exist.
Unfortunately, the Variable Fonts interface only supports the TTF format. This is mind-blowing to me. A TTF file is about 90% larger than a WOFF2 file and its support by browsers is equal to TTF!
I assume Elementor chose this route to cater to the masses. Google Fonts are always offered to you in TTF format when downloading them using a browser. But then I still don’t understand why they’re forcing it on us. At least give advanced users the option to upload WOFF2 files, right?
Static Fonts support; tedious and possibly unnecessary
If you want to use WOFF2 files, get ready to roll up your sleeves and get to work!
Elementor has always offered a separate Static Fonts interface. Here you can upload each font-weight/-style one by one in every available file format. This is to ensure maximum backwards compatibility. Again, WOFF2 is currently supported by over 97% of globally used browsers. Sigh…
Imagine this scenario: you have a website that uses 2 font-families: Poppins and Lato in the font weights 400, 700 and 900. And sometimes, only sometimes, you like to get wild and write a few words in italic!
In that not at all unlikely scenario, you have to go through the Static Fonts interface 12 (!) times. Yes, you read that right. 12! You have to upload each font-weight for each font-family in both regular and italic.
Who wants that? I can think of several other ways to make this easier for users. If only there was a fully automated way to self-host Google Fonts. Oh, wait a minute. There is!
Honestly, I don’t get it, but I don’t like to come across as bash-y. So, let’s move on…
As I write this, it occurs to me that I might be able to add some form of enhanced compatibility for Elementor Pro users. Perhaps OMGF Pro can convert its Variable Fonts TTF files to Variable Fonts WOFF2? I still have to research this, but I’ll keep you posted!
Elementor Custom Fonts’ Performance
I already mentioned it in the previous chapter and now we’re gonna get into it. In terms of performance, Elementor made some very questionable decisions. Variable Fonts support in TTF (WTF!?) format, and Static only WOFF2 support.
Let’s run some tests and compare both to OMGF.
Variable Fonts
Let’s take a look at what Variable Fonts in TTF format do to your website’s pagesize. In both examples we use Open Sans in Variable Fonts format.
When using Open Sans in TTF format, the filesize of the Variable Font is roughly 530KB. That’s 0.5 MB! That’s HUGE!
While we’re at it, let’s force everyone to use Bitmap images again, right!?
In this example, OMGF is serving the Variable Font in WOFF2 format. Notice the file size. It’s less than 50KB!
And here’s the kicker. Let’s zoom in at the example text in both images:
Notice the subtle differences in the lowercase F and A in the italic part? The italic text on the right also appears less slanted compared to the left example.
This is because, in the example on the left (the TTF file added by Elementor Custom Fonts) the italic styles are generated by the browser. In other words, that huge file of 0.5MB doesn’t even support italic font-style, while the 90% smaller WOFF2 file by OMGF Pro has full support!
I’m sorry, but TTF WTF, Elementor!?
Lesser of two evils; Static Fonts
If you care about performance, Static Fonts is the way — or rather, detour — to go.
While this is the best choice in Elementor’s Custom Fonts it still can’t beat WOFF2 variable fonts, though. In my review of Gutenberg’s Font Manager, I covered how Variable Fonts perform ~72% better than Static Fonts in realistic scenario’s.
Where WP’s Font Manager clearly favors UX over performance at every turn, Elementor Custom Fonts remains indecisive.
Compatibility
My final point of criticism is one thing that’s no one fault.
Just like Gutenberg’s Font Manager only supports FSE themes, Elementor Pro’s Custom Fonts only supports Elementor pages.
There’s nothing they can do about that. It’s the nature of the product, but since they also dropped the ball in terms of performance and UX, I wonder why they even bothered to add this feature. They obviously didn’t think this through.
What this means is that by just using Custom Fonts, chances are your website still isn’t GDPR compliant. If your theme or another plugin adds Google Fonts, this feature will not help you solve that.
Not to toot my own horn, but the free version of OMGF has full support for Elementor. Why not just instruct your support staff to suggest OMGF? You can host all your Google Fonts locally — not just Elementor’s, but for all your other plugins! And it even offers better compression. For free!
Summary
Am I wrong to assume that Elementor has a big dev team? To me, it’s baffling that no one raised their hand while this feature was in development, because this is bad in sooo many ways.
I think it’s great that the Elementor team recognizes the existence of Variable Fonts and provides an interface for it since v3.24. However, it looks like team Elementor couldn’t decide between proper UX and proper performance. WP core’s team got at least one of them right.
There are two ways in Elementor to upload Custom Fonts and neither of them excel at it. You can use the static fonts interface to upload WOFF2 files and get “better” compression, or you can upload TTF files in the Variable Fonts interface. Both perform at least 72% worse than Variable Fonts WOFF2 files.
This is madness, considering that performance and PageSpeed are important ranking factors nowadays. The facts that this feature is only available in their paid plans and limited to Elementor pages leads me to conclude that there is no good reason to use Elementor Pro’s new Custom Fonts feature.
Yes, I’m biased, but if you care about your site’s performance, just use default Google Fonts in Elementor and let OMGF self-host them for you — automatically!
Why does this sound like this is a new feature? I us this for at least 2 years already. What do I don‘t get?
Pffff, one of my users notified me as if it was new. I see that just the Variable Fonts support was recently added. Not in 3.27, but 3.24. I’ll update the post. Goes to show one should never make assumptions. Thanks for notifying me!
FYI: post updated!
Ah.. I see. 🙂
Well, I’m glad this showed up in my email today, and I’m glad I read it. I’m currently overhauling a website that I maintain for someone and it’s become a typeface nightmare. This article is a big help, thank you.
Thanks for stopping by! Yes, I don’t understand why Elementor chose this route. Page Builders are already not the best route to choose in terms of performance, and this just makes it worse.
Good luck with the overhaul! 🙂