Use code PERFMATTERS for an extra 10% off!

How to host Google Fonts locally in WordPress

There have always been a few advantages to hosting Google Fonts locally instead of using Google’s CDN. However, as of October 2020, the remaining benefit of Google’s CDN disappeared. Chrome moved to HTTP cache partitioning. As a result, Google Fonts are now redownloaded for every website, regardless of it already being cached in a user’s browser. Safari and Firefox already do this.

It’s much faster to host your Google Fonts now locally. This means storing and delivering your web fonts from your server or CDN, instead of relying on Google’s CDN. 

There are multiple advantages to hosting your Google Fonts locally: 

  1. It gets rid of the third-party DNS lookups and requests to Google. The fewer DNS calls you have, the better.
  2. You can take advantage of your server or CDN, including technologies like HTTP/3, caching expiry headers, etc. The more resources you can deliver from your server or CDN, the better.
  3. You have more control over how fonts are delivered. It’s easier to preload your Google Fonts and add CSS properties like font-display: swap as needed.

Host your Google Fonts locally with Perfmatters

Follow the steps below to host your Google Fonts locally with Perfmatters. It’s quick and easy!

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings

Step 2

Under the “Options” tab click on “Fonts.”

Perfmatters fonts
Perfmatters fonts

Step 3

Toggle on “Local Google Fonts.”

Enable local Google Fonts in Perfmatters
Enable local Google Fonts in Perfmatters

This feature will automatically locate any Google Font references you have on your site and download the fonts from fonts.google.com locally to the following directory: /wp-content/cache/perfmatters/yourdomain.com/fonts/

It will also create a corresponding stylesheet (xxxx.google-fonts.css) in the same directory that is linked in the header of your site. This way no more DNS requests are being made to Google, as your fonts are now referenced in the local stylesheet.

Note: The fonts are downloaded when you first visit a page on your site after you have enabled the feature.

Step 4 (optional, but recommended)

This step is optional, but we recommend toggling on Display Swap to speed up how your fonts load. This is important to prevent warnings regarding Core Web Vitals. Read more about Display Swap.

Step 5 (optional)

If you’re using a traditional CDN with a custom URL (cdn.domain.com) you’ll want to enter that in the CDN URL field.

If you’re using a full-proxy like Cloudflare without a custom CDN URL or using the CDN rewrite feature in Perfmatters, you can leave this field blank.

Step 6

Scroll down and click “Save Changes.”

Tip: After hosting your Google Fonts locally, you can also preload them. Check out our documentation on how to preload resources.

How to clear local fonts

There might be times where you need to clear the local fonts and start fresh. Perhaps you changed themes, or are choosing different fonts.

Follow the steps below to clear the local fonts in Perfmatters. This will also clear out the corresponding stylesheet.

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings
Perfmatters plugin settings

Step 2

Under the “Options” tab click on “Fonts.”

Perfmatters fonts
Perfmatters fonts

Step 3

Click on “Clear Local Fonts.”

Clear local fonts in Perfmatters
Clear local fonts in Perfmatters

Troubleshooting Local Google Fonts

If you’re having problems with the Local Google Fonts option, here are a few troubleshooting tips.

  • If your theme or plugin is adding fonts via @import url these won’t currently be picked up. We’ll see if we can add support for this in the future.
  • If you have a Web Font Loader running in another plugin (such as LiteSpeed), you’ll need to turn that feature off first so our Local Google Fonts feature can pick up your fonts.

Was this article helpful?

Related Articles