Optimize Fonts - Remove Async Google Fonts (Pro)

Since v3.6.0 OMGF Pro sports a feature, called Remove Async Google Fonts.

As you might guess, this feature allows you to remove (or technically speaking; block) Google Fonts from your website, which are loaded asynchronously.

When this option is enabled, OMGF Pro loads a tiny snippet of code (<1KB) into your site's header, which makes sure no requests are made to the Google Fonts API (https://fonts.googleapis.com/css). During my testing, I found themes like Enfold and Customizr to load Google Fonts asynchronously.

For reasons mentioned here, this doesn't work when the request is made from within an iframe, e.g. embedded Google Maps, a tawk.to support chat widget, YouTube video, etc.

Use Case

Blocking Asynchronous Requests

If you want to make sure no asynchronous requests to Google Fonts are made, e.g. by a plugin, then all you need to do is enable this option.

In my testing environment, running Enfold, Google Fonts are loaded asynchronously using a appendChild() method, Remove Async Google Fonts fixes this automatically:

Before	After

Replacing Asynchronous Requests with Locally Hosted Files

Besides just blocking the asynchronous request, it's likely you'd like to still use the Google Fonts, but serve them from your server (to comply with GDPR.

I decided to not automate this process, since it's not feasible. JavaScript can be written in many ways, to achieve the same thing, and it's very unlikely I'd be able to build a code parser that'd understand all these different approaches. However, the steps to achieve this are novice level.

First, along with enabling Remove Async Google Fonts, make sure you scroll to the bottom of the Optimize Fonts settings page, and enable Test Mode. This will make sure any changes and optimizations you make with OMGF are only visible to you.

With Test Mode active, the async Google Fonts are visible to your visitors.	But they're not visible to you, because they're blocked

Now, visit your site's homepage. Open up your browser's Developer Tools by pressing F12 and navigate to the Console tab. Refresh the page.

For every request to the Google Fonts API blocked by OMGF Pro, it will show a notice in the console, which looks like this:

Keep the tab open and head over to your server's file system.

Head into your theme's directory, preferably a child theme, e.g. /public/wp-content/themes/enfold-child/. Open the functions.php file and add the following code:

If you don't want to edit your theme's functions.php file, you can also download and install this plugin and edit it following the steps below.

function daan_dev_enqueue_google_fonts()
{
	wp_enqueue_style('daan-dev-google-fonts', 'YOUR_GOOGLE_FONTS_URL');
}
add_action('wp_enqueue_scripts', 'daan_dev_enqueue_google_fonts');

Replace YOUR_GOOGLE_FONTS_URL with the URL(s) mentioned in your console. Make sure that the apostrophes ('') stay around the URL, so it'll look like this:

function daan_dev_enqueue_google_fonts()
{
	wp_enqueue_style('daan-dev-google-fonts', 'https://fonts.googleapis.com/css?family=Poppins');
	/** 
	 *  Make sure you use a unique handle for every stylesheet you use and avoid generic words to not clash with your theme and/or plugins, 
	 *  e.g. daan-dev-google-fonts, daan-dev-google-fonts-2, daan-dev-google-fonts-3, etc.
	 */
	wp_enqueue_style('daan-dev-google-fonts-2', 'https://fonts.googleapis.com/css?family=Roboto');
}
add_action('wp_enqueue_scripts', 'daan_dev_enqueue_google_fonts');

If you're not comfortable editing PHP files, you can either use a code snippet plugin to insert the code or use Additional Fonts to install the Google Fonts you found earlier through a user-friendly interface.

OMGF Pro will pick up the Google Fonts URL you inserted using the code snippet above, and make sure they're served from your server and no requests are made to Google's Servers. On top of that you'll be able to fully manage the fonts from OMGF's Manage Optimized Fonts section.