How To Host Google Fonts Locally In WordPress (Manually Or With Plugins)

Host google fonts locally

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.

Gtmetrix font files

 

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:

  • https://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • https://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • https://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • https://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('https://yourwebsite.com/wp-content/uploads/fonts/
Roboto-Regular.woff2') format('woff2'),
url('https://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.

Gtmetrix report - omm

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

You Might Also Like:

9 Comments...

  1. Hi. I’ve tried this and followed all the instructions and double checked but nothing is working. Please help. I don’t understand if it’s the theme I’m using or what’s going on exactly. Everything is working fine until I test the font on the page and…nothing

    Reply
  2. 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.

    Reply

Leave a Comment