Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
Blocksy Theme
Brand Building
Bricks Builder
Digital Marketing
Email Marketing
Fluent CRM
Fluent Forms
Fluent SMTP
Google Fonts
Hydrogen Pack
Kadence Theme
Meta Box
Online Business
Oxygen Builder
Piotnet Forms
Piotnet Grid
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
Work From Home
WP Social Ninja
Zion Builder

Easiest Way to Self-Host Google Fonts on Your Personal Server

Written by:
Mohammed Wasim Akram
First Published on:
December 12, 2020
Last Updated on:
June 20, 2021
✼ Disclaimer: SyncWin is user-supported therefore this page may contain our affiliate links and if you purchase something using those links, we may get some commission without any additional cost to you. Click to Learn More.

Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.

However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.

Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.

Feel free to explore our Legal Policy Pages.

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.

Google Font Locally Image Step 1 - SyncWin

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.

Google Font Locally Image Step 2 - SyncWin

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.

Google Font Locally Image Step 3 - SyncWin

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.

Easiest Way to Self-Host Google Fonts on Your Personal Server | SyncWin

Formats for modern browsers

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

Google Font Locally Image Step 5 - SyncWin

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.

Google Font Locally Image Step 6 - SyncWin

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.

Google Font Locally Image Step 10 - SyncWin

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

Google Fonts CSS Stylesheet using Advanced Scripts - SyncWin

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.

Google Font Locally Image Step 7 - SyncWin

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.

Google Font Locally Image Step 8 - SyncWin

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:

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.

Google Font Locally Image Step 9 - SyncWin

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.

Disable Google Fonts from Oxygen Builder - SyncWin


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

Become an Insider to Syncronize with Web-Success.

email Newsletter
Facebook Group
Subscribe to our newsletter to get insider wisdoms.
Join our community to connect with likeminded folks.
Join FB Group

Related Resource Posts

October 15, 2018
Restore Missing WordPress Theme Header [Step-by-Step]

If all of sudden the header section of your WordPress website is missing for some unknown reason and you are not sure how to fix that, then this tutorial could be a lifesaver for you to restore the missing header of your website.

Read More
August 11, 2020
How To Create A Beautiful Sidebar in Oxygen [Step by Step]

If you're new to Oxygen Builder then you must be confused about how to set up a sidebar as there is no such option available, therefore in this post, I am going to teach you to set up and design a sidebar in Oxygen step by step.

Read More

Leave Your Feedback

Notify of
Most Voted
Newest Oldest
Inline Feedbacks
View all comments

Blog Categories

Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram