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
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.
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.
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?
Keep up the good work, man. Very impressive!
Thanks, Gal!
Does OMGF support custom WOFF2 fonts outside of the google font library?