Self-Host Google Fonts: Best Manual Method for 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 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...

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

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 the website.

• Save

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

• Save

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.

• Save

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

• Save

Formats for modern browsers

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

• Save

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

• Save

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 to the further next step which is to add it to your site's stylesheet.

• Save

Step #7: Add CSS to your website 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

• Save

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.

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.

• Save

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

• Save

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

• Save

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.

• Save

Conclusion

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.