OMGF Tutorial How To Host Fonts Locally

OMGF Tutorial | How To Host & Optimize Google Fonts Locally

The Most Overlooked WordPress Speed Hack!

First of all cheers to ‘Daan’ for creating marvelous plugins like OMGF and COAS. This plugin was the first one in WordPress to host Google fonts locally. The manual method was a bit long and complicated and this plugin saves us from all that trouble. I will be explaining the optimized aka best settings and steps on installing and configuring OMGF in this tutorial. If you want to host, preload, and optimize Google fonts, continue reading below.

Why Do We Even Need Another Plugin ‘OMGF’?

We do agree that speed is a crucial factor in SEO page ranking. One of the resources which decreases a WordPress website is the web fonts. By default, almost every theme uses Google fonts that are not present on your server but instead are loaded from Google’s server. This creates long blocking and connecting time which can also be seen in speed testing software’s waterfall such as GTmetrix and Chrome Dev Tools.

What OMGF does is that it downloads the fonts which are used by the theme in your website’s server and then loads from there. Not only does OMGF store fonts locally, but also preloads them, add swap attribute, and also serve the fonts via CDN.

The Limitation Of OMGF (Free version)

The free version only has ‘Force’ optimization mode only which creates only one stylesheet which applies on all the pages of the website. This means that it scans only one page and stores the fonts of that page only. If you are using a different font or a page builder on other pages, they will not be stored and added to the stylesheet.

Moreover, even if a page doesn’t use that font available in the stylesheet, it will still be loaded. As a result, you might see a warning in Chrome Dev Tools for the fonts:

"The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally."

Don’t worry, this doesn’t hurt your website, speed, or even SEO.

The Pro version of OMGF allows you to create separate stylesheets for each page of your website. The pro version automatically scans all your pages and posts and creates stylesheets accordingly. Not only that, but this plugin in the pro version can also detect and combine duplicate fonts into one stylesheet. Other font and icon extensions like SVG are also supported and can be optimized.

Important Suggestion!

I would suggest that you use all the fonts and page builder on one page and when OMGF asks for the URL of the page to scan fonts, give the URL of that page.

Hosting Fonts From Google / Third Party Server Vs Hosting Google Fonts Locally

Font HostingOn Google / 3rd PartyLocally (on the server)
SpeedPoor (worst if hosting is poor)Excellent (also depend on the hosting platform)
Can be CachedNoYes
Can be PreloadedNoYes
Can be PreconnectedYesNo (there’s no need)
Can be served on CDNNoYes
Swap/Fallback/Block Display OptionsNoYes

As you can see in the table above, not only does using fonts locally improve your website speed but also allows the fonts to be cached, preloaded, served on CDN, and even use the ‘Swap’ option. This isn’t possible if you are using fonts from third-party servers like Google.

What Problems Can Be Solved If You Host Your Fonts Locally?

  • ‘Avoid invisible text during font loading’ or ‘ensure text remains visible during Webfont load’ Flash of invisible text (FOIT) messages are fixed
  • Flash of Unstyled Text (FOUT) warning is also fixed (especially if you preload fonts)
  • Slow speed is improved dramatically if you are using many fonts on a page (reduces blocking and connecting time)
  • Improves user experience (how would you like that your visit a website and the text changes or loads slowly)
  • Google Pagespeed or other speed testers marking use the ‘swap’ attribute in fonts

OMGF Tutorial | A Step-By-Step Guide On Hosting Google Fonts Locally

Section 1 | Downloading & Installing OMGF

OMGF Tutorial How To Host & Optimize Google Fonts Locally - Step 1 Finding Plugin

Step 1: Go to Add Plugin > Search for OMGF

Step 2: Download OMGF | Host Google Fonts Locally by Daan

Step 3: After downloading activate it

Section 2 | Setting & Configuring OMGF

Step 1: Go to Settings > OMGF

Page 1: Optimization Fonts

OMGF Tutorial How To Host & Optimize Google Fonts Locally - Page 1
OMGF Tutorial How To Host & Optimize Google Fonts Locally - Page 1 End
  • Leave everything as it is. Just remember to choose ‘Swap‘ from Font-Display Option.
  • At the bottom, in the ‘Manage Optimized Fonts’, add your URL to the website. Try using one which you think has all the fonts which the theme is using or you can create such a page and add the URL here.
  • Click Save & Optimize

Page 1: Optimization Fonts (After Save & Optimize)

OMGF Tutorial How To Host & Optimize Google Fonts Locally - Page 1 Refresh
  • You will see that in the ‘Manage Optimized Fonts’ section, several fonts have been loaded. If you still think some of the fonts are still missing, try the ‘Empty Cache Directory’ button and add a URL to another page after page refresh.
  • Now, you need to PRELOAD the fonts which have been downloaded to your server. Luckily, OMGF allows that in its free version. Just check all the boxes under the ‘Preload’ option column.
  • Click Save & Optimize


If you are using any cache plugin or server-level caching, try clearing the cache after all this.

Page 2: Detection Settings

OMGF Tutorial How To Host & Optimize Google Fonts Locally - Page 2

Nothing needs to be changed.

Page 3: Advanced Settings

OMGF Tutorial How To Host & Optimize Google Fonts Locally - Page 3

In the free version, you can customize the folder location and name, where omgf stores the downloaded .woff files.

For Security

Try changing the default folder name to something else for better WordPress security.

OMGF & Cloudflare

If you are on the Pro version of OMGF and looking forward to hosting fonts on Cloudflare, there’s no need to add the URL of the CDN, Cloudflare by default serves fonts on its servers.

GTMetrix Waterfall Results | Before Vs After Hosting Fonts Locally


OMGF Tutorial How To Host & Optimize Google Fonts Locally - GTmetrix Before

After (with preload enabled)

OMGF Tutorial How To Host & Optimize Google Fonts Locally - GTmetrix After

See the drastic change. Without fonts served from a third-party server and the preloading feature ON, the connecting/blocking time decreased to almost under 5ms.

No doubt, ignoring fonts to be hosted locally is one of the most overlooked optimizations done by WordPress speed newbies and experts. Make sure to add this point to your WordPress website speed checklist. Also, it would be appreciated if you support the developer as well by purchasing the Pro version. Happy coding!