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.

How to Host Google Fonts Locally in WordPress
Optimize wordpress speed by hosting google fonts locally

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.

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).

google fonts select font

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

google fonts download

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.

transfonter

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

transfonter upload fonts

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

transfonter download google fonts

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

upload google fonts in server

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("https://wpbuildermaster.com/wp-content/uploads/fonts/Muli-Regular.woff2")
      format("woff2"),
    url("https://wpbuildermaster.com/wp-content/uploads/fonts/Muli-Regular.woff")
      format("woff");
  font-weight: 400;
  font-style: normal;
}

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

Example in the Additional CSS.

define google font in font face

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.

define where to use the fonts

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.

change default font family

2.7. Retest Your Website from GTMetrix

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

check whether fonts loaded locally

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.

caos plugin

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.

caos settings

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

change typography font

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.

Affiliate Disclosure – Some blog posts and web pages within this site contain affiliate links, which means I may earn a small commission if you click the link then purchase a product or service from the third party website. For instance, A2Hosting, Astra Pro and Swift Performance affiliate links. Purchasing a product or service from the links does not increase your purchase cost, but it is a great way to say ‘thanks’ to me if you enjoy my content and find my suggestions helpful. Please note that I only recommend products and services that I have personally used or have thoroughly researched. The guidances are based on my personal experience and research. I really appreciate your action of clicking my links to purchase, this is a great motivation for me to keep going.,

Comments

Please feel free to comment below if you have questions, requests or feedbacks from my blogs. I will be glad to hearing your responses and reply to you as sooner as possible.

2 thoughts on “How to Host Google Fonts Locally in WordPress? (2 Methods)”

  1. Hi there

    HELP!! I followed your recommendations but am running into problems.

    Doing final optimizations on a site before going live, hopefully today, and tried moving Google Fonts to be called locally using your plugin.

    It works great on all browsers except Safari.

    Any idea what’s the issue here?

    Website: http://bit.ly/30XsM8c
    Font: Montserrat

    Thanks,
    Todd

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top