Easiest Way to Self-Host Google Fonts on WordPress

If you are looking for a way to self-host Google fonts locally on your server to improve the WordPress website performance by reducing the server requests and make Google Fonts accessible even where the Google products are banned then follow this guide to achieve that within a few minutes.

There are so many reasons and debates about if the Google Fonts should serve via Google CDN or Locally from your server which I am not going to discuss in this post as I prefer to host fonts locally and in this tutorial, I am going to show you my method of doing that.

So without further talking let's begin...

Generate the required Google Fonts Formats

The very first step is to generate the necessary formats for the Google Fonts that you want to self-host locally on your server.

Unfortunately, until now Google only offers to download the TTF format on their official website and not all the other formats like WOFF, WOFF2 that you may need to upload on your webserver.

Therefore, we will follow a different method to generate fonts in various formats which you could find in the next section.

Step #1: Visit the Google Web Fonts Helper Website

In this tutorial, I am going to use a different website to generate the Google Font files as well as the CSS that you are going to need to host Google Fonts Locally.

The website I'm going to use is Google Webfonts Helper, so now just click the suggested link and visit to the website.

Step #2: Search for your desired Google Font

Now the next step is to search for the desired Google Font that you want to use on your site just using the search bar at the top left corner of that web page and then just select the 'Latin charset' which we are going to need.

In this case, I have selected Poppins for example but you can choose any Google Font you may like.

Step #3: Select the Font Styles you want to use

Now you need to select the font styles you want to use on your website, for example, if you just use Regular, Italic, 600, and 800 on your website then just select those styles only and leave the rest available options.

In my case, I will select each style above 200 as I regularly experiment with different font weights and styles on my site, so I would prefer hosting all of them locally as they don't take much space on my server so there is no harm doing this in my opinion.

Step #4: Select the Font Formats you want to use

After you select the necessary font styles then you need to decide if you want to serve to all the old and new browsers or just the modern browsers.

Formats for all browsers

Select the 'Best Support' option if you want to serve to all the old and new browsers including Internet Explorer, Safari, and Chrome etcetera as you can see in the screenshot below.

However, I have used Best Browser supports for my website though most experts suggest that the WOFF and WOFF2 format would be enough.

Formats for modern browsers

Or select the 'Modern Browsers' option, and the name is enough to understand the usage of it I believe 😉

Step #5: Add the proper directory location to generate CSS

Now as the CSS is already generated based on your font and style selections.

So the next step is to add the proper directory location for the CSS so the Google Web Fonts Helper generates the ready-to-use CSS files and you won't need to do manual works of assigning the directory location to the CSS snippet.

Here is the directory location you need to add "wp-content/uploads/fonts", just add it to the 'Customize Folder Prefix' field as shown in the image below.

Add Font files & CSS to your website

The first phase has been completed successfully if you followed all the suggested steps I have shared with you, and now we need to do the final implementations of those generated Google Fonts CSS and files which I am going to teach you in the below sections.

Step #6: Copy the CSS from Google Web Fonts Helper

Now the CSS is generated with the proper directory location so the next step is to copy it to your clipboard and proceed for the further next step which is to add it to your site's stylesheet.

Step #7: Add CSS to your website stylesheet

There are multiple ways to add the CSS to your stylesheets for example you could add it to Additional CSS under the WordPress Customizer, or also if you are an Oxygen Builder user, then you can add it to the Oxygen Stylesheet under the editor window.

Also, you could add it through a 3rd party CSS plugin like Code Snippets or Advanced Scripts to add the CSS, and in my case, I have added the CSS through the Advanced Scripts plugin so I haven't tested any other methods until now.

If you are interested to know how to add the CSS using the Advanced Scripts plugin interface then follow the below steps;

Title: Font Name Stylesheet
Type: CSS: Custom Code
Location: WP header
Priority: 10

Note: Although the auto-generated Google Font CSS is ready to use still we need to do some manual tweak and add "font-display: swap" after the '@font-face' and before the 'src' as you can find in the screenshot above.

Step #8: Download the generated Font files

Once you add the CSS to your stylesheet now you need to download the Google Font Zip file generated using the Web font Generator tool.

To download the zip file just find the button on the web font helper page and click the button to download the file on your computer, please check the screenshot below for visual guidance.

Step #9: Upload the Google Font ZIP File to the server

After you download the zip file to your local computer now the next step is to upload the file to your web hosting server under the "wp-content/uploads/fonts" folder.

There are multiple ways to do that, for example, you can use cPanel if your hosting provider offers or you can use software like Filezilla to access the server in case if you don't have cPanel or a similar program to use.

In my case, I have used the latter method to upload the zip file to my webserver.

Whatever method you follow you might need to create a 'Fonts' folder under 'wp-content' then 'uploads' if it does not already exist on the server.

Step #10: Unzip the Font Zip File on your Webserver

Now, this is the final step of hosting Google Fonts locally on your server. In this step, you need to unzip the Google Font Zip file that you just uploaded on your server following the above step.

If you are using cPanel or a similar program then you will find an option to right-click and extract the zip file on the server, but in my case, while using SFTP on FileZilla I haven't found an option to unzip the file.

Therefore I used a different approach to extract the file which you can follow in the video tutorial I found and added below.

Here is the file you are going to need after watching the video: https://github.com/ndeet/unzipper

Note: Once done consider deleting the unzipper plugin from your server.

After you unzip the font zip file the extracted files should look similar to the screenshot below if you have uploaded all the available font formats.

Bonus step for the Oxygen Builder users

If you are an Oxygen Builder user then you need to follow this bonus step to Disable the Google Fonts from the settings window or it will load the fonts from Google CDN and Local Server at the same time.

Follow the steps

> Login to WordPress Dashboard
> Hover over to the Oxygen menu from the left Admin Menu
> Click on the Settings sub-menu
> Click over the Bloat Eliminator tab from the top
> Select the Disable Google Fonts checkbox
> Now hit the Save Button and all done.

Conclusion

In this tutorial, I have shared the easiest way to host the Google Fonts locally on your server as you could find gazillions of tutorials on the internet but as far as I know this is the easiest method if you don't want to use a WordPress plugin to achieve this.

I hope you found this tutorial helpful and if that is the case, then consider sharing it with your friends and community so they also can take benefits out of it.

Also if you have any feedback or opinion then feel free to share that in the comment box below.

Thanks a lot for visiting our website syncwin.com.