WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How To Host Google Fonts Locally On WordPress (Or Other Fonts, Too!)

Last Updated on July 28th, 2023

Tags: , ,

Looking for a way to host Google Fonts locally on your WordPress site? Google Fonts is awesome because it unlocks a whole heap of potential font choices for your WordPress site. But it can also result in a ton of external requests to Google’s servers, which is why you might prefer to just host the fonts locally instead.

While I’ve framed this post as “how to host Google Fonts locally on WordPress”, the manual method that I’ll show you will actually work with any font, so it’s by no means limited to just Google Fonts.

Beyond that manual method, I’ll also share a plugin that makes it easier to host Google Fonts locally (but only works with Google Fonts – not with other fonts).

Why Bother Hosting Fonts Locally, Anyway?

I actually don’t think that most sites need to host their fonts locally. But it is a good option for some sites.

First off, hosting fonts locally opens up the whole world of fonts on the web. You’ll be able to use any font that you find and have the legal rights to. And that’s pretty cool!

Beyond that, there can be a performance boost from hosting fonts locally because you’re able to cut out external requests to whatever server is hosting your fonts. For example, you can see that external request to Google’s servers for a font in the Pingdom Tools waterfall on my test site:

Pingdom Tools

Now, this definitely doesn’t mean that hosting fonts locally will always make your site load faster.

When you’re talking about Google Fonts, Google’s servers are already pretty fast and Google Fonts has its own CDN to ensure fast global load times. Additionally, it’s possible that someone’s browser already has the font cached, especially if you’re using a popular font like Lato or Roboto.

Basically, I would encourage you to test your site before and after to make sure that hosting your fonts locally is indeed speeding up your site.

GDPR compliance is another major reason to host Google Fonts locally. 

Article Continues Below

In January 2022, a court in Munich ruled that using Google Fonts API violates the general data protection regulations even though over 50 million websites are using it. The ruling applies to all websites whose visitors are EU citizens. 

Hence, blocking the Google Fonts API on your site and storing the fonts you want to use on your server is the best way to avoid potential legal issues. Installing Divi, Elementor or Beaver Builder can help you disable Google Fonts on your WP site. 

Hosting fonts on a local server is also a good solution if you use fonts from Adobe Fonts, Fonts Awesome or other providers because they collect users’ IP addresses. 

Creating the website’s cookie policy will enable you to continue using fonts offered by different providers without having to host them locally.

How To Host Google Fonts Locally On WordPress: The Manual Method

Alright, now let’s get into the how-to part and I’ll show you how to host Google Fonts locally on WordPress.

Remember – while I’m using Google Fonts as an example, this manual method will work with any other font, as well.

Step 1: Download The Font File

To get started, you’ll need to download the font file that you want to use.

At Google Fonts, you can click the Select This Font link. Then click the download button:

Download Google Fonts

When you click the download button, Google Fonts will give you a ZIP file of all the font’s various weights.

However, I recommend only picking the minimum number of font weights needed – don’t use every single weight. A good stack is one each of:

Article Continues Below

  • Regular
  • Italic
  • Bold

So, extract the file and delete all the fonts that you don’t want to use:

Delete unused fonts

Step 2: Convert To WOFF Format (If Needed)

When you download a font from Google Fonts, it gives you the font in TTF format. To ensure cross-browser compatibility, most sources that I’ve read seem to recommend using the WOFF or WOFF 2.0 formats.

So if your chosen font isn’t already in that format, you can use the free Convertio tool to convert it to WOFF:

TTF to WOFF converter

Step 3: Upload Font Files To Server

Next, take those font files and upload them to your server using FTP or cPanel File Manager. Check out our guide on how to use FTP on WordPress if you’re not sure how to connect to your server via FTP.

To make your font files easy to find, you can add them in a folder called fonts. For this example, I created the fonts folder in the root folder of my site. You can see what it looks like in the screenshot below:

Upload fonts to host google fonts locally

Step 4: Add CSS For Font Face

Once you’ve uploaded the font files to your server, you need to include those fonts in your site’s CSS by using @font-face.

To do this, you can either use the Additional CSS tab of the WordPress Customizer. Or, you can use a plugin like Tom Usborne’s Simple CSS, which is what I’ll do for these screenshots. For more, check out our post on how to safely add custom CSS to WordPress.

Once you’ve chosen your method to add custom CSS, here’s the exact CSS that you’ll need:

@font-face {
font-family: 'roboto-regular';
src: url('https://vast-termite.w5.wpsandbox.pro/fonts/Robot-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;

For this code snippet:

Article Continues Below

  • Make the font-family the name of the actual font family
  • Replace the URL with the actual URL to the relevant font file on your server

You’ll also want to repeat the code snippet for each separate font file that you’re using. Here’s what it looks like for the three font files on my site:

add font-face CSS

Step 5: Add CSS For Where To Use Font

Now, all that’s left to do is actually start using your fonts in your CSS!

For example, if I wanted to make all my body text use the Roboto Regular font that I’m now self-hosting, I would use this CSS:

body {font-family: 'roboto-regular', Arial, sans-serif;}

You can add this CSS in the same location that you added the CSS code from Step 4.

I’ll show you the difference using a GIF of the WordPress Customizer. Watch the body text as I add the new CSS:

using locally hosted fonts

Step 6: Stop Theme From Loading Google Fonts

If your site is still loading fonts from the Google Fonts server, it might be because your theme thinks it still needs to use the fonts hosted on Google Fonts’ servers.

To stop that, you can try setting your theme to use a system font stack (if available). For example, GeneratePress lets me make that choice in the WordPress Customizer:

change to system stack

Or, you can also usually remove the relevant portions from your theme’s functions.php file. Or, as the comment indicates, you can use a child theme to override it:

theme functions.php

Follow the steps below if you want to stop loading Google Fonts in the Divi theme: 

  • Go to the WordPress dashboard and open the Divi tab
  • Find the Theme Options menu and turn off Use Google Fonts and Google Fonts subsets options. 

Stopping Elementor from loading Google Fonts is equally easy as you just have to navigate to the plugin’s Settings menu, open the General tab and click on the Disable Default Fonts option. 

You’ll have to use a code snippet if Elementor continues loading Google Fonts after you activate this option. 

You can also try the Disable Google Fonts plugin, though there’s no guarantee that it works for every single theme.

How To Host Google Fonts Locally With A Plugin

If you’re overwhelmed by the manual method, you can also host Google Fonts locally using a WordPress If you’re overwhelmed by the manual method, you can also host Google Fonts locally using a WordPress plugin called OMFG from Daan van den Bergh.

Its free version displays Google Fonts in the Optimize Local Fonts section and allows you to lower the Cumulative Layout shift by preloading fonts and unloading fonts you’re not using.

The plugin removes subsets automatically and continues to display text during the webfront load as it forces the font-display attribute to all Google Fonts on your website. OMFG’s free version supports all Google Fonts. 

Upgrading to OMFG Pro will give you access to the following features: 

  • Easy Access Google Fonts 
  • Material Icons 
  • WebFont Loader 
  • @import Statements
  • @font-face statements

Hence, the plugin can help reduce bloats caused by fonts and improve the website’s performance by allowing you to switch from Google Fonts to system fonts. 

I haven’t widely tested the plugin, but it seems pretty easy to use. All you do is search for the font by name and click Generate Stylesheet:

how to host google fonts locally with a WordPress plugin

You can also choose exactly which weights to include.

Once the plugin generates the stylesheet, it will add it to your theme’s header.

The Personal OMFG Pro license that enables you to use the plugin on one site is $24. You can buy the Business license for $39 if you want to install the plugin on ten websites or opt for the Agency license that gives you permission to use OMFG Pro on hundred websites. 

The license to install the plugin on thousand websites costs $299. 

I suggest trying the Local Google Fonts plugin if you don’t want to spend money on OMFG Pro. You can install it from the Plugins menu in your website’s admin panel. 

The plugin will detect all externally hosted Google Fonts on your website automatically. You’ll see the Host Locally button under each font along with its handle and the source URL. 

The plugin will download the font and store it on your site’s server after you click the Host Locally button and display the ‘Loaded, served from your server‘ message in the Status section.  While both of these plugins are super easy to use, they will only work for Google Fonts, whereas the manual method will work for any font.

Frequently Asked Questions About Hosting Google Fonts Locally

How Do I Add Google Fonts to WordPress?

You can either embed or enqueue a Google Font if you want to add it to a WordPress site manually. Both options involve altering the site’s CSS, functions.php, or stylesheet files and they’re far too complex for a novice WordPress designer. 

Installing WP Google Fonts or Easy Google Fonts plugins and using them to change your website’s typography is an easier option. Both plugins have live previews allowing you to see how a font looks on your site. 

It’s important to note that these plugins don’t store Google Fonts locally, so you must make sure your website is GPDR compliant if you want to use them.

Can You Host Google Fonts Locally?

The benefits of hosting Google Fonts on a local server were miniscule prior to the first court ruling that deemed the use of these fonts stored on Google’s servers a violation of data privacy regulations. 

Besides improving the site’s performance, storing Google Fonts on your website’s server will protect you from potential legal complications. 

The manual method of storing Google Fonts on a local server can be too complex for you if you don’t know how to add custom CSS to WordPress. However, you can use different plugins that automatically detect Google Fonts on your website and allow you to load them from the site’s server.

How Do I Host a Google Font on My Own Server?

Hosting a font locally means moving it from Google’s servers to a local server. You can do this manually or with a plugin, but each process involves downloading a font and its weights, uploading it to a server, and applying it to a page element or content. 

Using a plugin is easier because you won’t have to add custom CSS to your theme’s CSS. 

Moreover, you don’t have to waste time searching for all Google Fonts your site uses as a plugin will list them automatically and allow you to move them to a local server without leaving the WordPress dashboard. 

Try Hosting Fonts Locally Today

Hosting fonts locally is a great way to open your site up to new fonts and possibly speed up your site.

If you’re specifically looking to host Google Fonts locally, there are plugins that can help you do it. Or, you can always go the manual route which will work for any web font.

Finally, as with any significant change to your WordPress site, I’d always recommend testing to see whether hosting fonts locally does indeed speed your site up. If you find that you’re not getting the performance benefits that you expected, you might want to look into using a CDN to serve up your font files.

Have any other questions about how to host fonts locally on WordPress? Let us know in the comments and we’ll try to help!

Don’t forget to check out article on how to add Google Fonts to WordPress.