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 making 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 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…
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, and WOFF2 that you may need to upload on your web server.
Therefore, we will follow a different method to generate fonts in various formats which you could find in the next section.
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 the website.
Now the next step is to search for the desired Google Font that you want to use on your site. Just use the search bar in the top left corner of that web page and then just select the ‘Latin charset’ that we are going to need.
In this case, I have selected Poppins for example, but you can choose any Google Font you may like.
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.
After you select the necessary font styles, then you need to decide if you want to serve all the old and new browsers or just the modern browsers.
Select the ‘Best Support‘ option if you want to serve all the old and new browsers including Internet Explorer, Safari, Chrome etcetera as you can see in the screenshot below.
However, I have used Best Browser support for my website though most experts suggest that the WOFF and WOFF2 formats would be enough.
Or select the ‘Modern Browsers’ option, and the name is enough to understand its usage, I believe 😉
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 work 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.
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.
Now the CSS is generated with the proper directory location, so the next step is to copy it to your clipboard and proceed to the further next step which is to add it to your site’s stylesheet.
There are multiple ways to add 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 or simply use Swiss Knife Addon.
Also, you could add it through a 3rd party CSS plugin like Code Snippets, Advanced Scripts, or Scripts Organizer 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 in learning 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, we still need to do some manual tweaks and add “font-display: swap” after the ‘@font-face’ and before the ‘src’ as you can find in the screenshot above.
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.
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 it, or you can use software like FileZilla to access the server in case 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 web server.
Whatever method you follow, you might need to create a ‘Fonts‘ folder under ‘wp-content‘ and then ‘uploads‘ if it does not already exist on the server.
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 to 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.
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.
> 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.
In this tutorial, I have shared the easiest way to host Google Fonts locally on your server. 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.
However, if you don’t want to go through all these steps and just want to use a powerful and easy all-in-one font manager plugin for WordPress then consider checking Font Hero, also if you’re interested to know more about this tool then you must check my full review.
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 benefit from it.
Also, if you have any feedback or opinion then feel free to share that in the comment box below.
