Full Variable Fonts support in OMGF v5.3.0! 🥳

This update has been in the works for quite some time, and some of you have been waiting for it even longer: During this unbearable heat I bring full Variable Fonts support for Google Fonts to WordPress.

But wait, there’s more…

Old Cows

Lifting an old cow out of a ditch.

In Dutch we say: “Don’t lift old cows out of the ditch”, which basically means: don’t rake up the past. For this release, I did exactly the opposite.

A few months ago, I decided to scroll down to the bottom of my kanban board and I noticed a few issues that were there for far too long. At that time, Europe had spun itself into a GDPR madhouse and I was pointed out by many of you as the person to fix it.

Obviously, my old cows had to stay in the ditch a little while longer.

Now, things cooled down — a bit. So, for the past few weeks I’ve been working my 🍑 off to bring you a cool, new release introducing important (bug) fixes and new features!

OMGF v5.3.0 introduces Variable Fonts, and more!

Behind the Manage Optimized Fonts section of OMGF used to be a brilliant, yet outdated tool, called the Google Webfonts Helper API. When OMGF launched, it was the go-to solution for code-happy website owners to host Google Fonts locally.

Unfortunately, short after OMGF’s launch, development of the API stopped and it hasn’t been maintained since. Meanwhile, Google kept inventing new, cool stuff for their Google Fonts. One of which was — you guessed it — Variable Fonts.

For OMGF to support Variable Fonts meant having to remove all logic related to the outdated Helper API and implementing my own solution. A Pandora’s box I was afraid to open. To put it in technical terms: I had a 💩 ton of work ahead of me.

As OMGF’s popularity grew and demand for the feature increased, I knew I couldn’t/shouldn’t postpone it any longer.

I built a custom Web Font Loader with Variable Fonts support into OMGF and while I was right about the Pandora’s box, dropping the Google Webfonts Helper and implementing my own also allowed me to implement all sorts of cool, new features.

Excited yet? Let’s have a look!

Variable Fonts Support

Variable Fonts are an improvement over the typical, “old” way of handling font weights and styles. Typically, you need a separate font file for each font weight and style. By combining smart compression and vector techniques, Variable Fonts allows you to use only one file.

If you’d like to see it in action, press F12 to open up your Developer Tools, click the Network tab and reload this page. You’ll notice only one font file, called jost-normal-latin.woff2, is loaded. This site uses 2 font weights: 400 and 700, which are both included in that file!

OMGF tailors the generated font file specifically to the font weights and styles you require, i.e. not loading unused font weights and styles will result in a smaller font file.

This website only loads two font files: Jost (Variable Fonts) and Astra (an icon pack)

Subset Filtering

Force Subsets used to be a Pro Only feature. Now it’s available for everyone for the simple reason that it’s no longer optional.

OMGF will always require you to specify the subset(s) you use — and defaults to Latin and Latin Extended, which covers most of Europe, America and Africa.

This requirement stems from the fact that the Google Fonts API dropped subset filtering a while ago. And since you guys are used to OMGF generating lean, mean Google Fonts stylesheets, I couldn’t not take this option off the Pro list!

Obviously, Google doesn’t know that most popular WordPress themes (like Divi, Enfold and Flatsome — to name a few) load every available font style for each font family you configure. Multiply that by every available subset for each font family and you’ve got yourself a ~100KB stylesheet (that link was copied from an actual Divi site).

Bummer. Right?

Don’t worry! As of OMGF v5.3.0 the Used Subset(s) option will shrink that stylesheet down to ~1KB. Easy!

Proper Compression

Because the Google Webfonts Helper API was heavily outdated it identified itself to the Google Fonts API as an outdated browser — Firefox 39.

The Google Fonts API would in turn deliver a specific set of font files to the Helper API to guarantee proper functioning on that browser.

Unfortunately, Firefox 39 doesn’t support high compression techniques modern browsers have, resulting in larger font files.

This also fixes the compression bug that’s haunted OMGF for years. Ever experienced a broken capital A on a MacOS machine? This was the reason.

If you want to take advantage of these new features, simply empty OMGF’s cache directory and rerun its optimization by clicking Save & Optimize.

Other Improvements

Besides awesome features, this new installment of OMGF includes several performance optimizations:

  • The Optimized Fonts object used for loading preloaded Google Fonts in the frontend is now ~40% smaller in size.
  • OMGF no longer downloads font files in different formats. WOFF2 is always used, since ~95% of modern browsers support it. If you miss this feature, let me know in the comments, and I’ll build a mini plugin to bring it back.
  • The optimization process is up to 30% faster!

OMGF Pro v3.6.0 blocks Asynchronous Google Fonts!

This feature has been on my wishlist for almost a year, and now it’s finally here!

After updating to v3.6.0, Pro users will notice a new option, called Remove Async Google Fonts.

OMGF Pro is the only plugin for WordPress to block asynchronous Google Fonts.

This feature is both unique and AWESOME!

Some themes (like Enfold and Customizr) and plugins (like Forminator) load Google Fonts asynchronously. Meaning they’re loaded (using JavaScript) after the server has delivered the HTML to the browser.

Removing these Google Fonts used to be practically impossible. Until now! Now it’s a matter of checking a box!

When Remove Async Google Fonts is enabled, a tiny (<1KB) snippet of JavaScript is loaded into the head of your website. This code snippet will intercept any attempt to insert (appendChild(), insert() or append()) Google Fonts into your site’s head.

Unfortunately this doesn’t work for e.g. Youtube Videos, Google Maps (except for Maps embedded with the JS API), Recaptcha and many popular support chat widgets, like Tawk.to, since these are inserted into your pages using iframes.

An iframe is essentially another (usually external) page loaded into your page. Since the page inside the iframe isn’t located on our server, we can’t manipulate it — for obvious reasons.

Other Improvements

While this awesome feature is amazing enough on its own, OMGF Pro includes several bug fixes and UX improvements for its Pro features, like:

  • When Preload is checked, the Replace (Pro) checkbox is disabled, to prevent unnecessary font files from being loaded in the frontend.
  • When switching back to None after selecting a Fallback Font Stack (Pro) the Replace checkbox is now properly unchecked and disabled.
  • Only when Replace (Pro) is checked, do not load is checked for all styles of that font family. Not when it’s unchecked.
  • When Replace (Pro) is enabled, checking do not load for one of the corresponding font styles will uncheck Replace (Pro) to prevent unexpected behavior in the frontend.

Overal, a more smooth experience when managing Google Fonts stylesheets!

Update Now!

This release of OMGF and OMGF Pro is all about fixing bugs and implementing features that were on my todo list for a long time. The result is a much deeper optimization. Not just in terms of speed, but also in terms of compression and clutter removal.

OMGF v5.3.0 allows you to use modern compression and vectoring techniques, like Variable Fonts, while hosting Google Fonts locally. It also brings back the subset filter, a feature which was removed in the Google Fonts API months ago.

OMGF Pro v3.6.0 builds on top OMGF’s awesome features and allows us to easily Remove Asynchronous Google Fonts.

I’m excited! Are you? The update is available now, so what’re you waiting for?

❤️ it? Share it!

3 thoughts on “Full Variable Fonts support in OMGF v5.3.0! 🥳”

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shopping Cart
  • Your cart is empty.