How To Use Google Font Locally In WordPress: Host Google Font Locally

How To Use Google Font Locally In WordPress

Do you know that you will lose more than 50% of traffic if your blog takes more than 3 seconds to load? That’s a loss of huge amounts of traffic. Right? One of the key reasons for websites loading slowly is due to external resources.

The more external resource you have, the slower your website will be. Google font is one of the contributors to your external resources list. In this article, we will learn How To Use Google Font Locally In WordPress so that number of external resources comes down and your website gains some speed.

In this tutorial, I will mention a manual method and another method with a plugin. The manual method is good for hosting any fonts and not only google fonts. The plugin is good for only Google Fonts

What Is Google Font?

Google font is a repository of about 900 fonts offered by Google. Google font is free to use and there is no licensing or setup cost. Nowadays most of the theme developer uses Google Font as its easy to use. Even theme developers don’t need to include the font library in their theme package.

Whenever your website (with Google Font) loads, it downloads the Google font library from the Google server. Very straightforward. Right? In fact, changing fonts is also very easy if you use Google Font. Just need to change a few lines of code in your theme CSS file and you are done. Here are a few benefits of using Google fonts.

  • Wide range of selection choice
  • Font loading time is comparatively less
  • Changing font is easy and quick
  • No licensing or setup fee
  • Used by most of the theme

Why host Google Font Locally In WordPress?

We already realized that google fonts have a lot of benefits. Then why even thinking about hosting google font locally? Hosting locally means that Google Font should be loaded from your web server and not from the Google server.

Well, The main issue with Google font is that it loads from Google server every time you load your website. So every time you load your website an extra HTTP call is made to download the google font. As I said before that external resource is one of the main reason for a slow website. That is why Google Font makes your website load slow.

So if we host Google fonts locally, then your website won’t make any extra HTTP calls for google font as those will be stored in your web server. That increases website speed. Most of the cache plugin like WP Rocket does not cache files that are stored at an external server as they don’t have any control over it. If you host google font locally, that issue will also be solved.

Here you can see that when we pulled the report of a website that uses Google Fonts, it shows an extra resource and making an extra HTTP call. This is a brand new website. Consider if you have a big website, then Google font will make numerous HTTP calls.

how to use google font

Google font CSS codes can not be minified by cache plugin as shown below. This is one more reason why your website loads slow.

how to use google font locally in wordpress

Hosting google font locally helps your cache plugin to cache your google font and thus increase your website speed. So in a nutshell below are a few reasons for hosting Google Font locally in your web server

  • Increases website speed
  • Reduces HTTP calls
  • Enables cache plugin to store google fonts
  • Less number of external resource

Is it must to host Google Font locally in WordPress?

Well, you can live with google font without hosting in your server. All google fonts are loaded from Google CDN and Google CDN is very fast. On top of that, if you use popular Google fonts like Poppins and Roboto, there are chances that those fonts are already cached in the user browser. In that case, hosting google font locally in WordPress won’t make any difference.

How To Use Google Font Locally In WordPress?

There are two methods that we can use to use Google Font locally in WordPress. One is the manual method and the other is using a plugin.

How To Use Google Font Locally In WordPress Using Manual Method.

We need to follow the below steps to download and host google fonts locally in WordPress. Although there are many other methods that you can use, the below method is the easiest one and I also applied that for my blog.

1. Choose Google Font File

To download your favorite google font file , you need go to below link and at the top left corner type in your font name.

https://google-webfonts-helper.herokuapp.com/fonts

how to download google fonts

Once you type in the correct Google font name, you will be presented with all versions of that font file. You have charsets to choose from. You also have the option to choose the style of the font like regular, italic, bold, etc. Make selections according to your choice.

how to use google font

2. Download Google Font

Once you have chosen the google font and selected the charsets and style, you will notice a few lines of CSS code that got generated automatically. You can copy these lines of code if you want.

Download the file google font file by clicking on the bottom at the bottom of the page.

how to host google font locally

3. Upload Google Font file to webserver

The downloaded font file will be in the ZIP format. Unzip that and you will see contents like what I have shown below. I have selected three styles, so I have only 15 files. If you choose more styles, you will see more files in the zip folder. Below are the types of font file format that will be downloaded.

Most of the modern browser uses WOFF or WOFF2 format.

  • Open Type Font ( OTF)
  • True Type Font (TTF)
  • Scalable vector graphics font (SVG)
  • Embedded open type font (EOT)
  • Web open format font ( WOFF or WOFF2)
how to download google font

Upload the contents of that zip folder to your web server. Make sure you create a folder and upload those files there. If you want, you can only upload WOFF or WOFF2 format files as these are the newest formats, and most of the browsers support it.

Say for example, you have uploaded these font files into a folder having the following naming convention.

https://www.yourdomainname/font

4. Add custom font to CSS

Now you need to go back to the font download page and replace the URL in the codes with your font folder location URL. In my case, I replaced the mentioned URL with my font UR which is is https://www.riansclub.org/font

To add your URL in the CSS codes, you just need to enter your URL in the ” Customize Folder Prefix” option. If you enter the URL there, CSS codes will be updated automatically.

how to use google fornt locally in wordpress

5. Add CSS codes to Child Theme CSS file

Once the URL is updated, copy those pieces of code and add it in your child theme CSS file. You can also add those codes in the additional CSS section of your theme if the theme supports it.

You may also choose to change the name of the Font Family. Don’t worry, it won’t change your font. It will just differentiate the default server-driven google font vs your locally hosted google font. Some theme displays this name in their list of fonts. I am using the Astra theme that does not display the list and CSS does the trick for me.

how to host google font locally

6. Declare locally hosted fonts in body and header tags

Please copy this below piece of code in your child theme or additional CSS section. This basically instructs the browser to use your locally hosted font for bodies and headers.

body {font-family:'Poppins', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6,p,a {font-family:'Poppins', Arial, sans-serif;}

In case you change the font family name before, you have to change it here also. I decided to keep it “Poppins”, so here in this code also I kept “Poppins”

The font ” Arial ” is the primary fall back fonts and “sans-serif” is the system fallback font. If you don’t know what is a fallback font, then it is a backup font that loads if your primary font fails for any reason.

For example, in this case, if our primary fonts( Poppins) fails to load due to any reason, the browser will try to load the primary fall back font ( Arial). In the worst case, it will load the default system font ( Sans-serif) if it is there in your operating system.

So carefully choose the fallback font as those should be available in your operating system or theme. If you choose the wrong fall back font, your website may not load even.

That’s It. We are done. You are now hosting Google Font Locally. Lets us check the difference.

There is no item in the expires header section and also the Google font minify issue got solved as you see in the second picture.

Hosting Google Font locally can speed up your website by up to 20% if its a complex website. The example I have shown here does not show much difference because this website is brand new with no content.

7. Preload Locally Hosted Google Font For Added Speed

Even if you host Google Font locally, the browser still needs to parse the CSS codes and generates the object model. That wastes some time. If you don’t want to waste that time you can preload the locally hosted font file.

Please make a note that, for preloading use only WOFF2 format. Because most of the browser supports WOFF2 format with preloading.

For preloading, you can use the following code and add it to the <head> section of your website. Please change the URL with your URL. You need to add a separate line of code for each style. In this below example, I have added the code only for style 500.

<link rel="preload" as="font" type="font/woff2" href="https://www.riansclub.org/font/poppins-v12-latin-ext-500.woff2" crossorigin>

8. Fix ” Ensure text remains visible during webfont load” for extra speed

Many of you may notice that in Google page insights you see this issue ” Ensure text remains visible during Webfont load”. The snapshot is shown below. Basically what Google is suggesting us to display the system default font before your custom font loads. That helps in speeding up the website.

To solve this problem please use the following line of code for each style in your CSS code. I have shown an example of where the code should be placed for the style 500.

font-display: swap;
/* poppins-regular - latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.riansclub.org/font/poppins-v12-latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: local('Poppins Regular'), local('Poppins-Regular'),
       url('https://www.riansclub.org/font/poppins-v12-latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.riansclub.org/font/poppins-v12-latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.riansclub.org/font/poppins-v12-latin-ext-regular.woff') format('woff'), /* Modern Browsers */
       url('https://www.riansclub.org/font/poppins-v12-latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.riansclub.org/font/poppins-v12-latin-ext-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}

How to use Google Font locally using a plugin?

Below are the steps you can follow to use google font locally using a plugin. You have to install this plugin named OMGF. Please make a note that this method is only good for Google Fonts only.

  1. Type in the font
  2. Click on search to search the font file
  3. Select subsets from available subsets
  4. Click on subset search
  5. The select font style for preloading
  6. Click apply for preloading
  7. Click on download font to download the font of selected styles
  8. Now go to ” Advanced Settings” and select the ” Auto Remove” option
  9. Select font display option as “Swap” and save the setting
  10. Go to the ” Generate Stylesheet” tab and click on the button labeled ” Generate Stylesheet”

Now clear your cache and you will notice that Google fonts are now loading from your web server and not from Google server.

how to use google font locally in WordPress
how to use google font locally in WordPress
how to use google font locally in WordPress
how to use google font locally in WordPress
how to use google font locally in WordPress
how to use google font locally in WordPress

If you are using Astra Theme then you can use ” Custom Font ” plugin to locally host google fonts.

You May Like To Read:
SiteGround Web Hosting Review

Conclusion

As I said before, if you have an established website with so many plugins and contents, then hosting google fonts locally is going to help for sure. It will speed up your website. But on the other hand, if you have a new website then this may show you much difference.

I hope this article could able to help you to host Google font locally. If you have any questions, then you are always welcome to reach out to me through the comment section and I will be happy to help you.

Frequently Asked Questions ( FAQ)

What is Google Font?

Google Font is a repository of about 900 fonts offered for free by Google. Almost all themes nowadays come with Google Font.

Is hosting Google Font locally really worth?

Yes, It is really worth if you have an established website. But for new websites it may not be worth

Does hosting Google Font affects SEO?

No, No affect on SEO

Which method is better to host google font locally? Using Manual method or using plugin?

Using a plugin is better if you are a newbie and don’t know much about coding. The manual method gives you more control

Spread The Knowledge

Spread The Knowledge

Share This Post To Social Media

Leave a Comment

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

thirteen − three =

Scroll to Top