I still see requests to fonts.googleapis.com/fonts.gstatic.com after activating OMGF (Pro)

Last updated on 2022-09-01 16:50:42

It's possible that after activating OMGF (and OMGF Pro) that not all Google Fonts are served from your server, i.e. hosted locally. This can be for several reason, most of which are listed below, with possible solutions.

Check for Known Issues with Themes/Plugins

First thing you'll want to do is check the list of known issues with 3rd party plugins. This list provides simple fixes to issues with the most popular WordPress plugins.

If your used plugins aren't listed there, check the list of tested themes and page builders. If your theme needs additional configuration to work with OMGF (Pro), you'll find it there.

Conflict with Optimization Plugin

OMGF and OMGF Pro are tested with most, popular optimization plugins. But since OMGF is in itself an optimization plugin, there's a chance its cache can collide with the cache of the optimization plugin you're already using.

All optimization plugins use cached static files to quickly serve their optimized files, e.g. CSS or Page Cache. However, there are some situations where this cache can collide with OMGF (Pro)'s cache:

  • If you're using multiple optimization plugins, e.g. WP Fastest Cache and Autoptimize, make sure they're not both doing the same thing. There's no added value in minifying/combining CSS twice, so disable that feature in one of the plugins and allow just one of them to work its magic.
  • Sometimes cache can be stubborn in its removal. You can click "Clear Cache" a 100 times, but it's still there. Remove it manually to make sure you're serving a fresh, optimized copy to your visitors.

To rule out that your optimization plugin is causing issues, a good place to start is to temporarily disable it. Some plugins provide URL parameters to temporarily disable it from the frontend:

  • Autoptimize can be disabled by appending ?ao_noptimize=1 to the URL,
  • WP Rocket disables when any GET-parameter is added to the URL, e.g. ?no_wprocket=1.

You need OMGF Pro

If you only have OMGF installed, and you're still seeing requests to fonts.googleapis.com and/or fonts.gstatic.com, chances are these requests are buried too deep for OMGF to detect them. You might need OMGF Pro.

There's an important difference between OMGF and OMGF Pro:

Usually, Google Fonts are inserted into your pages by loading a stylesheet ( <link rel="stylesheet" etc. />) referencing the Google Fonts API (https://fonts.googleapis.com/css?family=etc.) onto the page. This is the most common method, and is supported by the free version of OMGF.

OMGF Pro extends this with several Advanced Processing features, and is able to:

  • Parse inline stylesheets (<style>) for @import statements referring to fonts.googleapis.com/css (and /icon) and @font-face statements referring to fonts.gstatic.com/s/.
  • Parse local stylesheets (.css files) for @import statement referring to fonts.googleapis.com/css (and /icon) and @font-face statements referring to fonts.gstatic.com/s/.
  • Parse inline WebFont Loader (<script>)
  • Parse the HTML document for any references to fonts.googleapis.com/earlyaccess.

To find out which of its Advanced Processing features you should enable, read this.

Long story short, OMGF Pro detects all Google Fonts technically possible to download and replace with local copies. This covers ~95% of all implementations. The remaining 5% are either very exotic implementations, or embedded in iframes. Which I'll explain in the next chapter.

Google Fonts are loaded by an embedded document, i.e. <iframe>

Some applications allow for easy insertion into your webpage through the use of iframes. Some popular examples of this are:

  • Embedded Youtube videos
  • Google Maps widgets
  • Google Recaptcha
  • Most support chat widgets, e.g. Tidio, tawk.to, etc.

These applications run on an external server, but are embedded into your page through an <iframe> element. Since OMGF (Pro) runs on your server, and not the 3rd party server, obviously, these Google Fonts can't be detected and/or modified to be loaded locally. You can read more here.

The easiest way to figure out if your Google Fonts are loaded by an iframe, is through your browser's Developer tools:

  • Press F12 to open up Developer Tools.
  • Navigate to the Inspector or Elements tab (the name of the tab differs per browser, the screenshot below shows an example of its content)
  • Press CTRL (Windows/Ubuntu) / CMD (MacOS) + F to search the page source for fonts.g. This'll match with either fonts.googleapis.com or fonts.gstatic.com.
  • In the screenshot above the blue arrow shows the search command. The green arrow indicates a match with //fonts.gstatic.com/s/etc. The red arrow indicates the <iframe> element it's nested in.

Google Fonts are loaded asynchronously

A somewhat exotic method to load Google Fonts is loading them asynchronously using JavaScript, themes like Enfold and plugins like Forminator are known to use this method.

When using Developer Tools to search for references to fonts.googleapis.com or fonts.gstatic.com, you might stumble upon a regular stylesheet element, looking like this:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=A+Font+Family+Name:100,200,300" />

If this stylesheet wasn't added asynchronously, the free version of OMGF would've captured it. If this isn't the case, it's safe to assume that it's added asynchronously. To verify this, you can: 

  • Right-click anywhere on your page, 
  • Click View page source, this'll display the page source of your page. 
  • Press CTRL (Windows/Linux) / CMD (MacOS) + F to search the page for "fonts.g" and keep pressing Enter/Return to browse through the results.

If the stylesheet you found in your Developer Tools is present, then the stylesheet isn't loaded asynchronously. If it's not present in the page source, then this means the stylesheet is loaded asynchronously.

Enable Remove Async Google Fonts (Pro) to remove this stylesheet.

A theme/plugin uses an(other) exotic implementation

As I stated earlier, OMGF covers the most common implementation method of implementing Google Fonts: loading a stylesheet into the HTML. OMGF Pro extends this with several less common methods.

If OMGF Pro isn't capable of detecting all Google Fonts on your page, and they aren't loaded by an embedded document, then this might mean your theme or plugin is using an exotic implementation to load Google Fonts.

I made it my mission to support any and all implementation methods, so please contact me, and include the URL of your site in the message, so I can figure out why there are still external requests on your site. If I can do something about it, you can count on it that I will. 🙂

Shopping Cart
  • Your cart is empty.