How to Host Google Fonts Locally in WordPress? (2 Methods)

In this guide, you will learn how to host Google Fonts locally in WordPress.

By hosting Google Fonts locally, your website will have

• Faster page loading time.
• Better GTMetrix/Pingdom grade.
• Fewer external Http request.

This guide provides the step by step guide on how to host Google Fonts locally.

Let’s dive right into the steps now.

1. Why Have to Host Google Fonts Locally?

In the past, web designers had a very limited choice in web fonts. The choices in web fonts increased when Google Fonts arrived in the market.

It’s a big, free and awesome library of fonts which you can use as your heart desire. It’s managed by Google and served from the domains fonts.gstatic.com.

It is always better to choose from a wide range of web fonts which look appealing. Google Fonts offer many noticeable features and benefits for which many web designers use them.

However, using too much Google Fonts can result in a ton of external requests from Google’s servers,

Disadvantages of Calling Google Fonts through External Request

• Slow down your WordPress loading time.
• Lower down your GTMetrix / Pingdom grade.
• Can’t compress, minify and optimize the external script using cache plugin.

Which is why you might prefer to just host Google Fonts locally on your WordPress site.

There are two methods that can be implemented to host Google Fonts locally and are explained in this post.

• Manual Method.
• Plugin Method.

Note: Although hosting Google Fonts locally will reduce the external request, your website still need to request it from your own server, so try to use

• Fewer Google Fonts – Reduce the number of Font Family used on your website.
• Fewer Font Weights – Reduce the number of font weights. Load only those you need.

2. Hosting Google Fonts Locally by Using Manual Method

The manual approach might seem a bit tricky but it is quite effective. Follow the below explained steps to host Google Fonts locally.

2.1. Download Google Fonts

From Google Fonts website, select the type of fonts you want to add (a bottom bar will then appear).

Click the download button. You will get the font family zip file in which contains all the number of font weights.

2.2. Convert TTF Font Format to Web Font Format (WOFF / WOFF2)

You will get all the fonts in TFF format. You must convert these fonts into web font format to get cross-browser compatibility, you can use Transfonter web tool.

Go to their site, click Add Fonts, then upload only the font types you’ll be using on your website.

Leave the settings as default, and make sure WOFF and WOFF2 formats are selected. Now click convert. And download the fonts.

Note: Only convert those font weights you are using and try to reduce the number of font weights using in your website, in my case, I usually use only 2 – 3 font weights for my entire website

2.3. Upload Font Files to the Server

You can use the cPanel or FTP file manager to upload the web font files, they should be put in the wp-content/uploads folder. You can create a “fonts” folder and upload them there.

The location should be:

https://yourdomain.com/wp-content/uploads/fonts/Muli-Regular.woff

https:// yourdomain.com/wp-content/uploads/fonts/Muli-Regular.woff2

2.4. Add CSS to Font Face.

After uploaded the font files to your server, you need to include those fonts in your site’s CSS by using @font-face. To do this, you can use the Additional CSS tab of the WordPress Customizer.

Go to Appearance -> Customizer -> Additional CSS. Add the following font face based on your web fonts.

@font-face {
  font-family: "Muli";
  src: url("http://wpbuildermaster.com/wp-content/uploads/fonts/Muli-Regular.woff2")
      format("woff2"),
    url("http://wpbuildermaster.com/wp-content/uploads/fonts/Muli-Regular.woff")
      format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Muli";
  src: url("http://wpbuildermaster.com/wp-content/uploads/fonts/Muli-Bold.woff2")
      format("woff2"),
    url("http://wpbuildermaster.com/wp-content/uploads/fonts/Muli-Bold.woff")
      format("woff");
  font-weight: 700;
  font-style: normal;
}

Example in the Additional CSS.

2.5. Define Where Do You Want to Use the Fonts

Now again you have to add CSS to define where you want to use the font on your website. It is an important step because you are going to use these fonts in your CSS.

Besides. you should specify common fonts such as Arial so that the browser can fall back to these fonts in case the font does not load or takes longer time to load.

body
{
    font-family: "Muli", Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, h4, h6 {
    font-family: "Muli", Arial, sans-serif;
    font-weight: 700;
font-style: normal;
}

Example in the Additional CSS.

From my example, if it fails to load the Google Fonts, the browser will fall back to Arial font or the default sans-serif font type of the system and will not cause any problem in rendering fonts.

2.6. Stop Theme from Loading Google Fonts

The sixth and the most important step is to stop your WP theme from loading Google Fonts from Google Font’s server. You should set your theme to implement the default system font in order to prevent it from loading fonts from Google Font’s server.

2.7. Retest Your Website from GTMetrix

Your font should be loaded locally and you get better GTMetrix score.

3. Hosting Google Fonts Locally by Using a Plugin

The manual approach is simply overwhelming. Many people might not even think about trying it because of the lack of technical expertise.

Do not worry about the complexity of this process because you can use a CAOS for Webfonts to host Google fonts locally.

This plugin allows you to search the required fonts by name and then you can select the subset and available fonts you want (select only those you will use), click download and generate stylesheet to add the chosen fonts.

Finally, you can go to your Typography Tab under WordPress Theme Customizer to choose using the fonts you have downloaded.

That’s how easily you can host Google Fonts locally on your WordPress website. The plugin makes the job easier and that’s why millions of web designers rely on plugins to do complex jobs while designing a WordPress site.

It’s Your Turn

Hosting Google Fonts locally is a great way to speed up your website and improve your GTMetrix score.

There are two methods which are manual and plugin methods that can be used to host Google Fonts locally, now it’s time to get your hands dirty to do the job.

Please remember to test the results after you have set up it.

Please let me know below if these methods help you or if you have any questions/recommendations.

If you are still having slow page loading speed, web hosting plays a very crucial role here, read the reviews of hosting I’m using also, where you can migrate your site to here.