How to Host Google Fonts Locally in WordPress?

Learn how to host Google Fonts Locally in WordPress. In this guide, we are going to explain how to load Google Fonts from your Server/CDN rather than loading from external sources.

How to Host Google Fonts Locally in WordPress

Moreover, in this tutorial, we are going to learn

  1. What is Google Fonts?
  2. How to Load Google Fonts Locally using Plugin?
  3. How to Host Google Fonts Locally without Plugin?
  4. Using @font-face
  5. And Using different tools to load fonts locally.

The advantage of hosting Google Fonts Locally in WordPress are:

  • Load fewer HTTP Requests.
  • Get the best score in GTMetrix/Pingdom/Google Page Insights
  • Load your WordPress Website even faster.
  • Rank Higher in Google’s Search Engine Result Pages (SERPs) as speed is a ranking factor.

so, Let’s get started

1. What is Google Fonts?

Google Fonts is a library of over more than 900+ fonts that can be used on our website for free.

To make your website more professional you can choose any of 900+ free licensed fonts owned by Google.

Most of the WordPress theme developers include Google Fonts in their theme, so users can choose font based on their choices.

Advantage of using Google Fonts

  • Google Fonts are free to use.
  • No Licensing Issue.
  • You can choose the best fonts that suit your website.
  • Find popular fonts (fonts.google.com/analytics).

If you use multiple fonts on your website then your website may get slower because of the high HTTP requests. so better to use only one font.

2. Correct Way of Using Google Fonts in WordPress

Here, in my blog, fonts are serving from 2 external sources i.e. fonts.gstatic.com & fonts.googleapis.com.

The screenshot below is a waterfall chart generated by GTMetrixwhere Google Fonts are generating 3 external requests.

Fonts Loading from Google Server
Before: Total 13 HTTP Requests

Next, after hosting fonts in our server and using CDN to serve the fonts.

The screenshot below is a waterfall chart from GTMetrix after hosting Google Fonts locally in WordPress.

Hosting Google Fonts Locally in WordPress
After hosting Fonts locally: Total 11 HTTP Requests

Also Read: How To Prevent & Block Spam Comments On WordPress?

Let’s dive into detail. I am using only one font on my blog. The font name is Questrail.

3. How to Load Google Fonts Locally using Plugin?

This method is an easier method if you don’t want to mess with coding and other things. Host Google Fonts Using OMGF WordPress Plugin.

OMGF - Host Google Fonts Locally

Thanks to the developer Daan van den Bergh for the plugin. Read the comprehensive guide to configure the OMGF plugin so that you can load the fonts locally.

Moreover, if you are interested in hosting Google Analytics locally then Dann has also created another awesome plugin CAOS that I have been using on my website to increase my page speed.

4. How to Host Google Fonts Locally in WordPress Without Plugin?

Finally, we are here to host Google Fonts Locally in WordPress without plugins. Before proceeding to this method please keep backup of your theme so that you won’t mess up with your entire site.

You can follow these steps to implement in any WordPress Theme. I am using Genesis Theme and GeneratePress in this method as an example.

Host Google Fonts Locally in WordPress for Genesis Framework

By default Genesis theme supports Google Fonts. I am using a Genesis child theme in one of my blogs.

Google Fonts is loading external HTTP requests so to boost my blog performance I decided to remove those fonts and host locally to achieve good loading time.

We will be doing all this stuff in the child theme. Learn how to create a child theme

By default, Genesis Theme comes with parent and child themes. so the process here is easy as you don’t have to create a child theme.

so, Let’s host Google Fonts Locally in WordPress

If you want to go with easier steps then you can download fonts from Google Webfonts Helper where you can skip steps from 1 to 5 mention below.

You will get fonts like eot, ttf, svg, woff and woff2 files with CSS snippets

Step 1: Go to fonts.google.com

You can select any fonts among 900+ fonts for free. Thanks to Google for the fonts.

Step 2: Choose the desired fonts

I am using Questrial fonts in my blog.

Selecting and Adding Google Fonts

Step 3: Download the fonts.

Remember the highlight things like the font-family, display=swap in the screenshot below

Downloading Google Fonts to use in WordPress

Step 4: Go to transfonter.org to convert the fonts.

You will get fonts on ttf formats. Let’s convert them to WOFF, WOFF2, etc.

Convert Fonts using Transfonter

Step 5: After converting, go to your wp-content > uploads folder using FTP.

Step 6: Create a new folder naming fonts inside the uploads folder.

Step 7: Upload all the converted fonts to that folder.

Creating Fonts Folder and Uploading Fonts Locally

Step 8: Go to the stylesheet i.e style.css of the child theme and paste the following code.

@font-face {
    font-family: 'Questrial';
    src: url('https://cdn.wplogout.com/wp-content/uploads/fonts/Questrial-Regular.woff2') format('woff2'),
        url('https://cdn.wplogout.com/wp-content/uploads/fonts/Questrial-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Please change the font family name with your name and URL according to your website.

Here I am using CDN to serve my fonts. If you don’t have CDN just replace it by the preferred version you are using i.e. with www version or non-www version.

Step 9: Disable Google Fonts Enqueuing from Server

Go to functions.php and remove enqueuing fonts from Google font API.

In Genesis theme, removed something like this from enqueuing.

wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400,700|Arbutus+Slab', array(), CHILD_THEME_VERSION );

Step 10: Again go to your style.css and update font-family accordingly.

For example, here I replaced it with ‘Questrial’ font with fall back font ‘sans-serif’

html {
    font-family: 'Questrial', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

And that’s it. Test your site in any speed tool tester or go to GTMetrix, check the waterfall chat and check if the Google fonts APIs have been removed.

Also, you can compare before and after charts.

Host Google Fonts Locally in GeneratePress Theme.

We are going to learn to host Google Fonts locally in GeneratePress Theme.

I am using GeneratePress Premium Theme in this WP Logout blog.

GeneratePress Themes for Every Project

Please follow the above steps from 1 to 7.

And after that follow the following steps.

So before proceeding, we have to activate typography modules in GPP Theme.

Step 1: Go to Appearance > GeneratePress > Modules > Typography > Activate

Step 2: Go to Appearance > Customizer > Additional CSS and Paste the following local fonts code.

@font-face {
    font-family: 'Questrail';
    src: url('https://cdn.wplogout.com/wp-content/uploads/fonts/questrial-v9-latin-regular.woff2') format('woff2'),
        url('https://cdn.wplogout.com/wp-content/uploads/fonts/questrial-v9-latin-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Here replace the font-family name with your font name, change the URL to your website name.

Step 3: Install Code Snippets Plugin

Since we are learning to host fonts locally without the plugin. As always you can create a GeneratePress child theme.

But to make the whole process easier I am installing the Code Snippets plugin.

Step 4: Now let’s use a filter to display our fonts to the typography list.

Go to Code Snippets > Add New > Enter the Title and paste the following code and Activate it.

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Questrail';
  
    return $fonts;
} );

Step 5: Remove Google Fonts APIs from enqueuing in GeneratePress Theme.

Go to Code Snippets > Add New > Enter the Title and paste the following code and Activate it.

add_action( 'wp_enqueue_scripts','wplogout_remove_google_fonts', 10 );
function wplogout_remove_google_fonts() {
    wp_dequeue_style( 'generate-fonts' );
}

Step 6: Go to Appearance > Customizer > Typography and find your font family, select it in system fonts and Hit Publish.

Choose your font family in Typography Section in GeneratePress Theme

That’s it. Finally, check your blog and result in GTMetrix. Also, don’t forget to check before and after results.

Latest Score of WP Logout WordPress Website Speed
Latest Score of WP Logout WordPress Website Speed

Also Try: How to Display Related Posts in GeneratePress Theme?

Frequently Asked Questions

How do I install Google fonts locally in WordPress?

You can install Google fonts locally using the OMGF plugin in WordPress. Moreover, you can also host Google fonts locally without a plugin by following the method in the blog.

What is font-display: swap inside @font-face?

font-display is a CSS property that can be used in the @font-face rule. font-display: swap helps to swap the font with system fonts before and after loading the webpage that helps to get a higher score in Google PageSpeed Insights.

Are Google Fonts Free to Use Commercially?

Yes, you can use Google Fonts for personal and commercial use. Google fonts are released under SIL Open Font License so it’s 100% free to use.

Where can I stored Google Fonts in WordPress?

You can store Google Fonts by creating fonts folder inside wp-contents > uploads using WP File Manager plugin or directly using FTP software like FileZilla.

At The End

I hope you will try to host Google Fonts locally in WordPress.

If you love to speed up and optimize your WordPress website then there are many aspects to look after and Google Fonts is one of them.

If you have any queries then, please feel free to comment below.

Happy Optimizing!!!

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I love things to do with WordPress, Digital Marketing. Blogging has been my Passion. In my free time, I enjoy watching Series and Movies.

6 thoughts on “How to Host Google Fonts Locally in WordPress?”

  1. Hey! Suraj,
    I am using GeneratePress with Elementor. The main font I am using is “Muli” and I use “Poppins” in some special page titles. I’m trying the OMGF plugin but my font still loads from google cdn. How do I fix it?

    Reply
    • Hi Sayan, Use this code to remove Google Fonts in GeneratePress. Hope this works

      add_action( 'wp_enqueue_scripts','wplogout_remove_google_fonts', 10 );
      function wplogout_remove_google_fonts() {
          wp_dequeue_style( 'generate-fonts' );
      }

      Also, check-in the Typography section, if you are using any Google Fonts.

      Reply
  2. Hey Suraj!
    Thanks for this wonderful article. I checked your font and it saying apple system! Can you tell men how can I use this on my site?
    Thanks

    Reply
    • Hi Talha, I revert back to the system stack font. Go to Appearance > Customize > Typography > Body > Choose System Stack > Publish
      In a similar way, you can customize all others.

      Thanks

      Reply
  3. Hi Suraj, I want to add three different font weights/styles of JosefinSans family. How do i do that? Can you please guide me

    Reply
    • Hi Yatharth,
      you can follow the same method listed in the article. If you are using GeneratePress then you can select font-weight from the Typography section in the Customizer.

      Reply

Leave a Comment