How To Load Google Fonts Locally In WordPress: An Optimization Item Found In GTmetrix, Pingdom, And Google PageSpeed Insights

Home » WordPress Speed Tips & Tricks » How To Load Google Fonts Locally In WordPress: An Optimization Item Found In GTmetrix, Pingdom, And Google PageSpeed Insights

If your WordPress site has Google Font errors in GTmetrix/Pingdom, loading Google Fonts locally should fix them.

You can’t control some external resources and scripts, which makes them impossible to compress, minify, or optimize. This can seriously affect your WordPress speed. One of the most common external resources are Google Fonts. If you are already configured a cache plugin like WP Rocket or WP Fastest Cache, you may start noticing external resources like fonts affecting grades + load times. This is where loading Google Fonts locally comes into play. This allows your cache plugin to compress all resources related to your custom font(s).

Take a full backup of your site (or at least the files you’re editing) before making changes.

Google-Fonts-GTmetrix

 

Step 1: Choose A Google Font

In this example, we will use Roboto font with two font weights: regular (400) and bold (700).

Google-Fonts-Selection

Use Fewer Google Fonts – keep your Google Fonts to a minimum (less fonts = less requests).

Be Selective With Font Weights – the number of weights also affect load times. If you only need the bold version, uncheck the other weights so Google Fonts only load those you need.

 

Step 2: Download The Font

Download the fonts when you’re ready. Google will automatically download all font weights, so the selection of font weights is not required at this step, and is instead required in step 3.

Google-Fonts-Download

 

Step 3: Convert Fonts To Web Fonts

Next, we’ll convert these font files (.ttf) to web font files. I’ll be using Transfonter. Go to their site, click Add Fonts, then upload only the font types you’ll be using on your website. I’m using Roboto-Regular.ttf and Roboto-Bold.ttf so I have both regular and bold weights. Leave the settings as default since WOFF and WOFF2 cover all major browsers. Now click convert.

Transfonter-Google-Font-Conversion

Only select the font types you’ll be using on your website…

Google-Fonts-Conversion-Selection

 

Step 4: Download Converted Font Files

Once the fonts are converted, you can download them. In the zip file, each font will include WOFF and WOFF2 formats (since we downloaded 2 fonts, we will have a total of 4 font files).

WOFF-Google-Font-Conversion

 

Step 5: Upload Font Files To WordPress Files

Upload the web font files via FTP or cPanel, ideally in the wp-content/uploads folder so the theme and core updates do not override them. I created a “fonts” folder and uploaded them there (to separate them from other files). To confirm they were uploaded successfully and you have the correct links, open the links in your browser and the fonts should begin to download.

Example:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Replace yourwebsite.com with your own website (and HTTPS if using SSL). Ideally, test all 4 links and make sure you have the URLs correct (and also be sure to save them somewhere).

 

Step 6: Add Custom Font To CSS

Next, we will add the CSS you got inside the downloaded zip file named stylesheet.css. This is the CSS code that will connect your fonts with your existing CSS and make them ready to use.

Where to place the CSS code is subjective but you can use an external stylesheet or the WordPress’ wp_enqueue_style function in functions.php, or at the start of your style.css file (or custom.css if you have one). I’m going to paste it in the default style.css file of the theme. Copy/paste the code into the stylesheet, and change any relative URLs to absolute URLs.

Default URLs in stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');

Change these to:
src: url('http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');

Basically, just include the folder URL before the font filename.

This is optional but if you prefer, create a custom class to easily use the font in existing HTML. Here we named our classes roboto_font and roboto_bold_font. To do this, add this to your style.css file (after the above code):

.roboto_font {

font-family: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

font-family: “Roboto”, “Arial”, sans-serif;

font-weight: bold;

}

 

Step 7: Test The Font

Now create a test page and place the following code in the Text Editor

<h2>Testing</h2>
<h2 class="roboto_font"> Custom Font Test </h2>
<h2 class="roboto_bold_font"> Custom Font Test </h2>

Google-Fonts-Testing

Preview the page. If you did it correctly, you should see the new custom font! The first heading is the default font of your website, the second and third are the Google Fonts fonts we added:

Local-Google-Fonts

 

Step 8: Set The Default Font

To make this your website’s default font, add this CSS to your style.css file:

body {

font-family: “Roboto”, “Arial”, sans-serif;

}

Be careful! If you already have a custom font, it may not appear correctly and require debugging or editing existing font-family properties and replacing them with this one instead.

 

Step 9: Always Have Font Fallbacks

It is bad practice to apply a Google Font as a font-family. Instead, you should have multiple fonts specified including the common fonts such as Arial, Times New Roman so that the browser can fall back to these fonts just in case the font does not load or takes longer to load.

Without fallback:
font-family: 'Roboto';

With fallback font:
font-family: 'Roboto', Arial, sans-serif;

Now, in case it fails to load your Google Fonts, the browser will fall back to Arial font or the default sans-serif font type of the system and not cause any issues with the font rendering.

 

Retest Your Website (In GTmetrix)

You shouldn’t see any Google Fonts errors in it…

New-GTmetrix-Report.png

Have questions? Drop me a line.

See Also: How I Got 100% GTmetrix Scores

 

Frequently Asked Questions

✅ How do you speed up Google Fonts?

Combining Google Fonts, hosting them locally, and preconnecting and prefecthing them can all help improve their load times. Check your GTmetrix Waterfall to get a benchmark of your fonts, then retest it after optimizing.

✅ How to convert fonts the web font files?

We use Transfonter.

✅ What about Elementor custom fonts?

Elementor Custom Fonts can also host Google Fonts locally and is built-in to Elementor Pro. You can use this to upload your font files.

✅ Which plugins help optimize fonts?

WP Rocket, OMGF, Autoptimize, and Perfmatters can all help you optimize fonts.

✅ What about prefetching and preconnecting fonts?

These can speed up fonts by helping browsers anticipate them better. We use the Perfmatters plugin by Kinsta to prefetch and preconnect fonts, but you can also use WP Rocket or the Pre Party Resource Hints plugin.

Cheers,
Usama

View More Tutorials

Subscribe
Notify of
10 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Daan van den Bergh

Hi!

Just wanted to drop by and say that that is in awesome approach to host fonts locally.

I like that with transfonter you can upload any font and host any font locally.

For those who are looking for an easier way to specifically host Google Fonts locally, try OMGF (Optimize My Google Fonts): https://wordpress.org/plugins/host-webfonts-local/

Daniel Cooper

Hi Usama, One of the problems with downloading the fonts this way is that you are stuck with the fonts as they are in that moment. Whereas if you utilize the Google Fonts API you get the latest version of the files. This is important as the fonts are frequently updated. You can check the ‘lastModified’ date in the API to see what I mean – https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY That is why plugins like https://fontsplugin.com and https://wordpress.org/plugins/host-google-fonts-locally check each week to see if anything has changed and wether the fonts need to be re-downloaded.

Drew
Reply to  Daniel Cooper

Who cares? Why does that matter?

Aalay Uhuy

src: url(‘onlinemediamasters.com/http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2’) format(‘woff2’)

is that stackpath cdn url must include? or you just typo by mean only use http://yourwebsite.com/../../ ?

Admin
Reply to  Aalay Uhuy

Hi Aalay,

No need to include the CDN URL in it.