How does OMGF (Pro) actually work?

By /

Table of Contents

Since I get this question a lot, I decided to create a FAQ for your reference!

First off, OMGF Pro is an add-on for OMGF. It runs on top off OMGF, and basically “learns” OMGF more tricks to detect and optimize (Google) Fonts.

Host Google Fonts Locally

OMGF’s main feature is downloading Google Fonts and generating a stylesheet for these fonts on your server, so they can be served from your server, i.e. “hosted locally”. 

It works like this:

  1. On each pageload OMGF loads a little helper function to parse the entire HTML document for requests to the Google Fonts API, i.e. URLs pointing to fonts.googleapis.com/css(2).
  2. When it finds such a stylesheet, the helper function sends the URL to the OMGF_Optimize class, which in turn translates this URL to an object which you can manage in the Manage Optimized Fonts section of the settings screen. It also downloads each font file, and generates a stylesheet for them.
  3. These stylesheets and fonts are saved (cached) along with their unique identifiers (which in ~99% of cases are defined by the theme’s/plugin’s developers), so they can be reused on following pageloads.
  4. This process is repeated until it has found every unique Google Fonts API request throughout your site.

Basically, after activating OMGF, your Google Fonts will be served faster and GDPR friendly, because they are served from your server, instead of a 3rd party’s server.

Manage Optimized Google Fonts

OMGF features tons of other features, e.g. preloading, unloading or replacing Google Fonts to minimize CLS (Cumulative Layout Shift) and chop chunks of your pagesize:

  1. When you choose to unload a font style for a certain stylesheet — by checking do not load — a new stylesheet is created after clicking Save & Optimize. This stylesheet contains a unique identifier (mod- followed by 5 random characters) to make sure your visitors will receive the new stylesheet — instead of the cached, larger stylesheet.
  2. When Replace (Pro) is checked for a certain font family, all corresponding font styles are checked to unload. At this point, a new, unique identifier is created to refresh the stylesheet.
Shopping Cart
  • Your cart is empty.