How to configure OMGF Pro’s Google Fonts Processing

Properly fine-tuning OMGF Pro’s Google Fonts Processing feature can significantly boost your website’s performance and speed up WordPress! But how does it work? And what does it do?

This section of OMGF Pro’s user manual zooms in on each of the available options and clarifies how it influences OMGF Pro’s Google Fonts Processing and Detection behavior. Each chapter also includes an example of a scenario when this feature should be used.

Prerequisites

To keep things readable, this section of the manual makes a few assumptions:

  • You are slightly familiar with the terms: HTML, source code, header, footer, (the not human) body, stylesheet, hyperlink and parsing,
  • You know how to open your browser’s Developer Console and lastly,
  • You have a general idea of how Google Fonts are loaded into your website.

I’ll do my best to keep things as humanly readable as possible, but please don’t shoot me if things get too technical for you.

What does Google Fonts Processing (Pro) do?

To answer this question, we need to take a little step back and take a look at how OMGF Pro works.

To detect Google Fonts, OMGF Pro parses a page’s source code the moment it’s loaded.

The short and simple answer is, that Google Fonts Processing allows you to skip certain parts of your source code, because you know that these parts don’t contain Google Fonts.

Example: Can I skip this part of my source code?

Let’s imagine that I’m configuring OMGF Pro’s Google Fonts Processing feature on my WordPress blog; Daan.dev.

I open up my blog’s frontend, right-click somewhere and select Inspect to view its source code (see screenshot to the right).

I search the source code (CTRL / CMD + F) for any references to fonts.googleapis.com.

No hits! This means that my page(s) is/are not loading any Google Fonts through stylesheets.

The anwer is: Yes! By disabling the Process External Stylesheets option we’ll speed up OMGF Pro fonts detection process.

A quick example: the <head> section of this post on Daan.dev.

A closer look at each Google Fonts Processing (Pro) option

Hopefully the previous example has given you a general idea of how Google Fonts Processing works and how you can find out whether you can disable each option.

Now let’s take a closer look at each of the available options and find out whether you can disable this option for your WordPress site.

Process External Stylesheets

This option scans for <link> elements pointing to fonts.googleapis.com anywhere in the page’s source.

The example in the previous chapter clarifies when you should disable this option. However, it should be mentioned that Google Fonts are most often (by far) added using external stylesheets using a <link> element. Usually in the <head> section, less often directly after the <body> tag and sometimes directly before the closing </body> tag.

Should I enable External Stylesheets processing?

Search your site’s source code for references to fonts.googleapis.com/css. If you get hits similar to this, you should leave this option enabled:

<link rel='stylesheet' id='random-handle-name' href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600&subset=latin,latin-ext,cyrillic&display=swap' type='text/css' media='all' />

The values for the id and media attribute will differ, as well as the family, subset and display attribute. Some of them might not be defined at all.

Process Inline Styles

While Process External Stylesheets scans for <link> elements, this option scans for inline @import statements (wrapped in <style> blocks) pointing to fonts.googleapis.com and @font-face statements pointing to fonts.gstatic.com.

Should I enable Inline Styles processing?

Inline @import statements are less commonly used to include Google Fonts on pages. I found @font-face statements to be used more often.

Search your site’s source code for references to fonts.googleapis.com/css. If you get hits similar to this, you should leave this option enabled:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

or

@font-face {
font-family: 'Open Sans';
font-weight: 400;
src: url(https://fonts.gstatic.com/s/opensans/v23/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2'); }

The values for each of the mentioned attributes will differ and could include other attributes, such as subset, display, font-display or unicode-range. Like in this example, they might not be defined at all.

Process Stylesheet Imports

While Process Inline Styles scans for both @font-face and @import statements, Process Stylesheet Imports only scans for @import statements inside any stylesheets loaded by your themes and plugins.

There’s a simple reason for this: parsing local stylesheets is resource intensive and should be used sparsely.

Should I enable (in) stylesheet Import processing?

It takes a bit of an advanced approach in your browser’s Developer Tools to check if stylesheets include @import statements loading Google Fonts.

You’ll want to search through all files for phrases like “fonts.googleapis.com“.

Most browsers (e.g. Firefox and Chrome) include ways to search through files.

– In Chrome, when Developer Tools is opened, press CTRL / CMD + Shift + F in any tab.
– In Firefox, open up the Debugger tab and press CTRL / CMD + Shift + F.
– For other browsers I suggest you use Google and search for something like [browser name] search through files developer tools.

Process Stylesheet Font Faces

While Process Inline Styles scans for both @font-face and @import statements, Process Stylesheet Font Face only scans for @font-face statements inside any stylesheets loaded by your WordPress configuration.

There’s a simple reason for this: parsing local stylesheets is resource intensive and should be used sparsely.

Should I enable (in) stylesheet Font Face processing?

It takes a bit of an advanced approach in your browser’s Developer Tools to check if stylesheets include @import statements loading Google Fonts.

You’ll want to search through all files for phrases like “fonts.gstatic.com“.

Most browsers (e.g. Firefox and Chrome) include ways to search through files.

– In Chrome, when Developer Tools is opened, press CTRL / CMD + Shift + F in any tab.
– In Firefox, open up the Debugger tab and press CTRL / CMD + Shift + F.
– For other browsers I suggest you use Google and search for something like [browser name] search through files developer tools.

Process WebFont Loader

WebFont Loader is a library created by Google and Typekit which allows asynchronous loading of Google Fonts (and other webfonts.) OMGF Pro handles various ways to detect if this library is being used. Some of which are:

  • Check if webfont.js is present in the page source,
  • Check if WebFont Loader’s configuration is present anywhere, usually called WebFontConfig.

Should I enable WebFont Loader processing?

The easiest way to find out if WebFont Loader is being used on your WordPress instance is by opening up your browser’s Developer Tools (by pressing F12) and navigating to its Network tab.

Now visit your website in the same browser window and the Network tab will be populated with several requested files.

By filtering the requests by phrases like ‘webfont’ you might find files being loaded, calleg e.g. webfont.js or webfontloader.

If any of these requests are present, you should enable Process WebFont Loader for OMGF Pro to properly detect any Google Fonts (if present)

Process Early Access

Google’s Early Access fonts are openly available beta version of font files.

The usage of these fonts should be considered ‘exotic’. I.e. if your WordPress site is written in a Middle Eastern or Asian language you might be using a beta font.

For English (or any other European language, e.g. Spanish, French or German) it’s probably safe to keep this option disabled.

Should I enable Early Access processing?

Early Access fonts use the same methods as regular Google Fonts.

Follow the methods in the previous chapters to figure out if your site makes requests to files originating from fonts.googleapis.com/earlyaccess and/or fonts.gstatic.com/ea.