Local Fonts – Magic Fallbacks

Table of Contents

Magic Fallbacks (Only available in OMGF Pro — default: off) makes sure nothing on your page moves while your Google Fonts are loading. This eliminates the layout shifts (CLS) caused by fonts, and improves your PageSpeed score.

Why do fonts cause layout shifts?

Until a Google Font has loaded, your browser shows the text in a system font, like Arial. System fonts are almost never the same size as your Google Font. So when the Google Font arrives, lines wrap differently, paragraphs grow or shrink, and everything below them moves. That’s a layout shift.

How does it work?

For every Google Font on your site, Magic Fallbacks picks the closest matching system font on Windows, macOS and Android. It then scales and spaces that system font so it takes up exactly the same space as your Google Font. Your visitors see the text in the tuned system font first, and when your Google Font is swapped in, nothing moves.

This happens automatically, for your theme’s and your plugins’ fonts alike. It works on its own, so no other options are needed.

How to enable Magic Fallbacks

  1. Go to Settings › Optimize Google Fonts › Optimize.
  2. Check Magic Fallbacks.
  3. Click Save & Optimize.

In Optimize Local Fonts, the Fallback column shows the fallbacks generated for each font, e.g. Roboto, HelveticaNeue, Arial (optimized). They replace any Fallback Font Stack you selected manually.

Good to know: turning Magic Fallbacks off again resets the Fallback Font Stack dropdowns and Replace checkboxes, so review them before you click Save & Optimize.

Replace Google Fonts entirely

With Magic Fallbacks enabled, you can check Replace for any font family. That Google Font is then no longer loaded at all, and your visitors see its tuned system font instead. Your pages get lighter and faster, while your text keeps (almost) the same proportions. The letters themselves look like the system font, so check whether you like the result.

Which fonts are left as they are?

  • Display and handwriting fonts, like Lobster or Pacifico. No system font comes close enough, so OMGF Pro lists these fonts in a notice and keeps the Fallback Font Stack you selected for them.
  • Icon fonts, like Material Icons. They don’t contain text, so they don’t need a fallback.

Seeing the notice “OMGF Pro could not find a matching fallback font for …”? Please contact me and include the message, so I can add that font.

How can I check if it’s working?

Run PageSpeed Insights: layout shifts caused by fonts should no longer be listed. Or, in your browser’s Developer Tools (F12), set the network speed to a slow connection and reload the page: your text stays in place when the Google Fonts are swapped in.

Frequently asked questions

Developers

Magic Fallbacks’ filter hooks are listed in the Developer Docs.