4 Best Ways To Host Google Fonts Locally in WordPress

4 Best Ways To Host Google Fonts Locally in WordPress

There are numerous reasons to host Google Fonts locally. One of the most important reasons is to improve your website’s loading speed.

Google Fonts offers several amazing fonts to improve the typography of your WordPress website. However, most website templates load these fonts from external sources, which can slow down the speed of your web pages and affect your ranking.

Thankfully, you can host Google Fonts locally on your WordPress website to ensure optimal performance. So keep reading as we explain how you can do this in a few simple steps.


What are Google Fonts?

Google Fonts is an online library of free and open-source fonts developed and optimized by Google for use on sites and other digital projects.

These fonts are available for use by anyone, including web developers, designers, website owners, and just anyone looking to improve the typography of their website.

And yes, it’s used extensively. A quick look at Google Fonts analytics shows a total font view of over 75,000,000.

How to Host Google Fonts Locally in WordPress

There are several ways you can host Google Fonts locally on your website. Therefore, in this article, we will outline four methods to do it.

Method 1. Host Google Fonts Locally with a WordPress Plugin

The simplest way to host Google Fonts locally on your WordPress website is by using a plugin.  There are several plugins that can allow you to easily host Google Fonts locally on your website.

There’s the Fonts Plugin and the OMGF plugin. Both plugins have over 200,000 installations.  For this guide, we will use the OMGF plugin.

To host Google Fonts locally using the OMGF plugin, follow the steps below.

Install the OMGF Plugin

You’ll need to install the OGMF plugin to set up Google Fonts locally.

To do this, log in to your WordPress dashboard and go to Plugins > Add New. This will take you to the WP plugin page.

Add new plugins page - host google fonts locally

Type “OMGF” into the search box. The plugin should now appear in the search result. Click on Install Now to install the plugin. Next, click on Activate to enable the plugin on your website.

Host Google Fonts Locally

Setup the Plugin

Once the plugin is activated, you need to set it up so it becomes functional. To do this, go to Settings > Optimized Google Fonts.

Optimized Google Fonts settings - host google fonts locally

Once you are on the Optimized Google Fonts plugin page, scroll down and click on Save & Optimize. With this, you’re done with the setup.

Congratulations. You’ve successfully hosted Google Fonts on your website.

Click Save and Optimize button

Method 2. Host Google Fonts Locally on WordPress Using CSS

If you don’t like the plugin option, there’s another way you can host Google Fonts without installing a plugin.

Below, we will show you how to host Google Fonts on your site using CSS.

Download Google Fonts

Start by visiting the Google Fonts platform to download your preferred fonts. The site hosts a vast collection of fonts for you to choose from.

So browse through the available fonts. You can change the view and filter based on category and language to find your preferred fonts.

Once you find a font you like, click on it, and then click on “Download family” at the right top to download the font.

For instance, to install “Tulpen One,” we’ll search for it on the search bar, then click “Download family.”

Click Download family

Extract and Convert the Downloaded Font File

The font you download from Google Fonts will be saved in Zip format, so you have to extract it. Find the Google Fonts file in your downloads folder and then right-click on it. After that, click on ‘Extract.’

Once you’ve extracted the file, you’ll notice that the fonts are in TrueType font family (TTF) format.

Extracted file in TrueType font format

To install the font on WordPress, we have to convert it to the Web Open Font Format (WOFF) using a tool like Transfonter or Convertio. We will use Transfonter for this guide.

Go to the Transfonter website, click on Add Fonts, and then upload the extracted font.

Then, click Convert.

Upload and convert extracted fonts

Click the Download button once the font is converted.

Upload Fonts to your Server

Next, you have to upload the converted font file to your WordPress site locally. You will need an FTP program like cPanel or FileZilla to do this successfully.

We will use cPanel for this guide. So login to your cPanel and click on ‘File Manager’ to access the root folder.

cPanel File manager

Once in the root folder, create a new font folder if you don’t already have one.

To do this, click on the ‘+ Folder’ option at the top-left.

Click +Folder option

Next, enter the folder name and click Create New Folder.

Create new folder

Now, click on Upload at the top of the page.

Click upload

Now click Select File and choose the converted file to upload it to your website.

Select file and upload

Link New Fonts to your Site CSS 

After you’ve uploaded the font files to your FTP, you will need to integrate the fonts into your site’s CSS using @font-face. To do that, follow the steps below.

First, from your WordPress dashboard, go to Appearance > Customize.

Appearance >> Customize page

In the customize section, scroll down and click on Additional CSS.

Additional CSS

Now copy the font face code below and paste it into the Additional CSS panel.

@font-face {
font-family: 'TulpenOne-Regular';
src: url('https://yoururl/fonts/tulpenone-regular.woff') format('woff');
font-weight: normal;
font-style: normal;

Additional CSS panel

Ensure to replace ‘yoururl’ with your website URL. Also, change the font family to the one you downloaded from Google Fonts. Here, we used the ‘Tulpen One family.’

Click ‘Publish’ once you’ve made those changes.

Publish your changes - host google fonts locally

Call the Fonts Using CSS

You’ll need to use custom CSS to apply the font to any part of your website you want.

To do this, you’ll need to insert the CSS code below at the top of your child theme’s CSS file or via the Additional CSS section.

body {
    font-family: 'TulpenOne-Regular';
h1, h2, h3, h4, h5, h6 {
    font-family: 'TulpenOne-Regular';


We will use additional CSS for this. Navigate back to the Additional CSS panel. Appearance > Customize.

Customization page

On the Customize panel, scroll down and click on Additional CSS.

Additional CSS section - host google fonts locally

On the Additional CSS panel, copy and paste the code and click then click on Publish.

Click Publish to save changes

Note: The code above has two sections that allow you to change the font for the body and header of your page. You should modify the font family names to the ones you uploaded. We used TulpenOne here.

Finally, you have successfully hosted and applied the TulpenOne-Regular font to your website.

Method 3. Use  Google Web Fonts Helper

In the method above, we had to manually edit the CSS rule and convert the font file before uploading it to the server. But what if there’s a simpler way to do it?

Google Web Fonts Helper is a handy tool that can automate the process of hosting Fonts locally on your site. It basically generates the CSS rule for the font and provides the format files in WOFF or WOFF2 formats. So here’s how to self-host Google Fonts using this method.

To get started, go to Google Web Fonts Helper. The platform lists all the Google Fonts on the Left bar. Search for the fonts you like.

We will use Roboto for this illustration. So search for Roboto or the font you want to host on the left search bar and click on it.

Search font to host

Choose Styles and Character Sets

To generate the CSS rule for the Google Font, we have to first specify the styles, charsets, and type of browser support we need. You can leave these at the default settings if you don’t have anything specific in mind.

However, if you want the website to support older browsers, then choose Legacy or Historic Support.

For instance, we’ve selected Latin and Latin-ext charsets; and two styles; Roboto regular and 100italic styles.

Select charsets and styles

Scroll down and choose ‘Historic Support’ to ensure the font supports older browsers.

You can see the font-face rules for the two fonts we selected.

Choose Historic support - host google fonts locally

Download Font Files

Next, you also need to download the Font file. To do that, click on the download button located at the bottom left corner of the page.

Download font file - host google fonts locally

Note: Don’t close the Google Web Fonts Helper page. You’ll still come back to it.

Extract the Downloaded Font File

Locate the font file in your download folder and extract it. As you can see below, the file format for our download is WOFF2, which is the ideal format you need.

This eliminates the need to use tools like Transfonter or Convertio, as we did in the previous method.

WOFF2 file

Upload Fonts to your Website

Just like we did in the previous method, you’ll need to upload the font files to your server using either an FTP tool like FileZilla or cPanel.

We will use cPanel like we did before. Log in to your cPanel console and click on File Manager > + Folder to add a new font folder if you don’t already have one.

Create new folder

Open the new font folder you created (it should be empty). Click on Upload right corner of the page.

You will then be redirected to a different page where you can upload the font file. Ensure you’ve already extracted it.

Upload the font file

Click on Select File and choose each font style on the extracted file until you upload all of them.

In our cases, we downloaded two font styles, and we’ve uploaded two of them as shown below.

Once done, you can exit the cPanel.

Download and upload font style

Copy Font-Face File

Now, go back to the Google Web Fonts Helper page. Scroll down and copy the Font-face code. You’ll need to insert it via the Additional CSS section.

Insert Font-face code - host google fonts locally

Navigate to the Additional CSS panel by clicking on Appearance > Customize.

Appearance >> Customize page

On the Customize panel, scroll down and click on Additional CSS.

Additional CSS section

Paste the Font-face code you copied and click Publish.

Publish changes - host google fonts locally

Activate the Installed Font

Now, to activate the font on your website, you have to insert another code in your Additional CSS.

Copy the code and paste it under the font-face code you added above. Then click Publish to save it.

body {
    font-family: 'Roboto-italic';

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto-Regular';

Note: This code allows you to specify the fonts to use for the body and headers of your pages. We used Roboto here. So, change Roboto-italic and Roboto-Regular to your chosen font families.


As you can see below, the font has changed to Roboto, which means we’ve successfully hosted Google Fonts.

Method 4. Host Google Fonts Locally Through Your Theme

Several WordPress themes come with the Google Fonts optimization option to allow you to self-host Google Fonts locally without codes.

Themes like Astra and Nexter WP have this feature. Let’s see how it works on Astra below.

Host Google Fonts Locally Using Astra Theme

From your WordPress dashboard, go to Astra. Then click on Settings.

Astra settings

On the Settings Page, Click on Performance. Then, toggle on “Load Google Fonts Locally.

Toggle on "Load Google Fonts Locally"

Enabling this feature will send a Google API request, which will gather all the fonts and asset files and store them locally on your server.

Preload Fonts Locally

By default, the browser will load the fonts directly from your server every time a request is made. However, this can take a long time to load and slow down your site’s loading times.

Preloading fonts notifies the browser to import the fonts early so it loads faster. Fortunately, Astra allows you to set this up with one click. To do this, simply turn on the Preload Local Fonts toggle.

Turn on Preload Local Fonts toggle - host google fonts locally

Flush Local Font Cache

One problem with storing things locally is that you won’t get automatic updates once there’s one available. The same applies to locally hosted Google Fonts.

That’s where the Flush Local Fonts Cache Feature comes in. The feature allows you to refresh your locally hosted Google Fonts at any time.

To enable this feature, click on the Flush Local Fonts Cache button.

Click the Flush Local Fonts Cache button - host google fonts locally

And that is it. You have successfully hosted Google Fonts on your WordPress website with your theme. Congratulations.

Frequently Asked Questions About Google Fonts

Why load Google Fonts locally?

Loading Google Fonts locally can improve your site’s speed. It also reduces the number of HTTP requests sent and eliminates the risk associated with relying on third-party resources like Google CDN. So, even if there’s a problem with the delivery, your site will still perform optimally.

How do I add Google Fonts to my website locally?

There are several ways to add Google Fonts to your website. One of the most common methods is to use the CSS font face. To do this, you have to first download your preferred font from Google Fonts.

Next, you have to upload the font files to your website using an FTP client. Once you’ve done that, you can then call the font using Font-Face and CSS.

How do I host Google Fonts locally in WordPress?

To host Google Fonts on your WordPress site, you can use a WordPress Plugin like the OMGF | Host Google Fonts Locally plugin.

Some WordPress themes, like Astra and Nexter WP, also come with the Google Font Optimization option, which allows you to host Google Fonts locally without code snippets.

How do I host a Google Fonts on my own server?

To host Google Fonts locally on your server, you have to download the Font files from the Google website or through the Google Web Fonts Helper. Next, you’ll have to upload it to your server using an FTP tool like cPanel or FileZilla before calling it with Font-Face and CSS.


There you have it. That’s how you can host Google Fonts on your WordPress website in four different ways. Remember that this process can significantly increase your website’s loading speed. So it’s worth every step of it.

 This post was written by Mesheal Fegor

Mesheal Fegor is a Web/WordPress Developer and technical writer. His WordPress help articles have been featured on Kinsta and other sites. Mesheal holds a master's degree in computer science. His writing focuses on technical WordPress issues, ranging from core WordPress problems, to issues with WooCommerce, and more.

Last edited by: FixRunner Team