OMGF Pro v4.1 Introduces Smart Preload: Automatically Preload Above-the-Fold Fonts

Preloading above-the-fold-fonts is a headache for many. You know the drill: fonts are a part of your website’s (corporate) identity yet they are often overlooked when optimizing for performance. Compression is important, not overdoing it is, too.

I think, for the average user, to preload above-the-fold fonts is the most difficult step, yet it’s the one that makes your site feel snappy and polished. On the other end, preload the wrong ones (or too many), and you’re just slowing things down.

After the last release, it was high time OMGF’s preload feature needed some polishing, that’s why OMGF Pro 4.1.0 introduces a brand new feature: Smart Preload.

And, OMGF also gets some love in v6.0.3: I’ve added compatibility for the upcoming version of Elementor — more on that later.

What is Smart Preload?

In short: Smart Preload automatically detects which font-families are used above the fold and preloads them for you.

No manual setup, no digging into DevTools, no guessing. It’s a fully automated way to make sure your most important fonts are fetched early — without bloating your pages or overloading the browser.

Why it’s tricky (and important) to Preload Fonts

Preloading fonts tells the browser: “This file is important. Load it early.” That can make a huge difference for performance — especially for things like:

• LCP (Largest Contentful Paint): often a heading or hero element using a custom font.
• FOIT (Flash of Invisible Text): when the browser delays rendering until the font is fully loaded.
• FOUT (Flash of Unstyled Text): when the browser temporarily displays a system font until the font is fully loaded.
• CLS (Cumulative Layout Shifts): often a side effect of FOUT; if fonts load late, elements can reflow when the right font finally arrives.

But here’s the catch: if you preload too many or the wrong fonts, the browser spends time fetching assets that might not even be used immediately. This creates unnecessary network overhead, delays rendering, and could even make things slower.

The trick is to preload just enough — only the fonts needed right away. I.e. only preload fonts above-the-fold.

That’s where Smart Preload comes in.

How Smart Preload Works

When you enable Smart Preload in OMGF Pro, a small (~8KB) snippet of JS code is loaded in the frontend for logged in administrators only. All you need to do is visit your frontend while logged in and:

1. Smart Preload makes a list of all above-the-fold elements, and
2. Analyzes which font-families are actually rendered above-the-fold.
3. Then, it configures OMGF Pro to preload the corresponding font files.

This ensures the most visible part of your page — the content users see immediately — loads fast, smooth, and without font-related jank.

No DevTools digging, no manual copy-pasting of URLs into your optimization plugin, no performance roulette. And, you can rest assured that the loaded font files are perfectly optimized by OMGF.

Have I seen this Feature before somewhere?

Well, you might have. While doing my research I found that WP Rocket recently introduced a similar feature. But, here’s why I would still suggest using OMGF Pro to automatically preload above-the-fold fonts:

Even though WP Rocket also supports hosting Google Fonts locally, they don’t apply any further optimizations than doing just that: self-hosting Google Fonts. Which is fine, I appreciate the fully automatic approach, and at least they got the compression and variable fonts support part right. Yet, there are many other ways to improve the loading of (Google) Fonts:

• Google Fonts can be loaded inside (inline) CSS stylesheets, using @import and/or @font-face statements, sometimes causing FOUT,
• Google Fonts can be loaded asynchronously, using JS (e.g. Webfont Loader), causing CLS,
• Unused subsets should be stripped from the CSS stylesheet to reduce bloat, and
• Icons are fonts, too…

None of these strategies are applied by WP Rocket, or any other optimization tool out there. This means, by using WP Rocket’s Preload Fonts feature (possibly combined with its Self-host Google Fonts option) you’re preloading unoptimized, sometimes even externally hosted font files, which could slow things down.

That’s why OMGF Pro is still your safest bet when it comes to Google Fonts optimization.

Smart Preload in Action

Let’s say your hero section uses a bold variant of Roboto, and your body text uses a lighter weight further down the page. Smart Preload ensures that only the bold Roboto variant gets preloaded — not the full family, not all weights.

On a different page, where the layout is different, you can simply hit Auto-configure Preload settings for this page and OMGF Pro adjusts accordingly.

It’s per-page smartness, built right into OMGF Pro.

How to Enable Smart Preload

Enabling Smart Preload is easy:

1. Update to OMGF Pro 4.1.0
2. Go to Settings > OMGF Pro
3. On the Local Fonts tab, scroll down and check Smart Preload (Pro)
4. Hit Save & Optimize

Now, simply navigate to your frontend (while being logged in as an administrator) and OMGF Pro will take care of the rest!

It’s worth noting that Smart Preload will overwrite your existing Preload settings. But, then again, if you set it up correctly, it won’t have to change anything.

Lastly, what’s new in OMGF v6.0.3?

While we’re at it — Elementor is finally stepping into font optimization. Well, kind of.

Starting with version 3.30, which is set to be release July 1st, they’ll begin hosting Google Fonts locally by default. A welcome step!

To stay ahead of that change, I’ve added compatibility for it in OMGF 6.0.3 (the free version). That means:

• All fonts added by Elementor are detected and optimized by OMGF (and OMGF Pro)
• Continued optimization via OMGF (Pro or Free)
• Support for subsetting, compression, and — of course — Smart Preload

Even though Elementor is getting smarter with fonts, there’s still a lot OMGF does that goes beyond “just hosting them locally.” Performance isn’t just about where the files live — it’s about how and when they’re loaded. But, more on that later.

After its release, I’ll be publishing a full review of Elementor’s new local fonts feature, and a side-by-side comparison with OMGF when it comes to performance, flexibility, and Core Web Vitals impact. Stay tuned!

Final Thoughts

Preloading fonts can be a double-edged sword. Done right, it massively improves performance. Done wrong, it just adds weight. Smart Preload is OMGF Pro’s way of automating the smart way — loading only what’s needed, when it’s needed, where it matters most.

No fluff. No trial and error. Just faster pages.

Let me know how it works for you. Bugs, ideas, love letters? You know where to find me!