Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
BasePress
Blocksy Theme
Brand Building
Bricks Builder
BunnyShell
Cloudflare
CSS
Digital Marketing
Elementor
Email Marketing
Entrepreneurship
Fluent CRM
Fluent Forms
Fluent SMTP
GoDaddy
Google Fonts
HTML
Hydrogen Pack
JavaScript
Jetpack
Kadence Theme
LiveCanvas
Meta Box
Online Business
Oxygen Builder
OxyMade
PHP
Piotnet Forms
Pods
SaaS
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
WordPress
Work From Home
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: 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.

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

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.

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 21, 2020
3 Step Method to Create Buttons with Icons in Oxygen

How to create a button with an icon in Oxygen? I have seen new users ask this question every now and then in Oxygen Group. So I decided to share my method of creating icon buttons in Oxygen which I think is the easiest.

Read More
May 25, 2021
Amazon Web Services: Access Keys Creation [Step-By-Step]

In this short tutorial, you're going to learn how to create AWS Access Keys step by step as you would require these credentials to integrate AWS with other products AND/OR services to leverage the power of Amazon Web Services.

Read More
1 2 3 11

Leave Your Feedback

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Blog Categories

Favorite Products

WordPress Support - Sidebar Widget Ad Banner Image - SyncWin
SyncWin Community Group Ad Banner Image - SyncWin
Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram