How to Host Local Fonts in WordPress for a Faster Website

Beautiful typography can improve your website’s design and captivate your audience. But as experts in WordPress performance, we find that relying on third-party font services can slow down your site, harming user experience and potentially hurting your SEO.

The solution is to host the fonts locally. By taking control of your font files, your site can skip those extra loading steps, ensuring a blazing-fast website with better user experience and SEO.

In this article, we’ll show you how to host local fonts in WordPress, allowing you to enhance your site’s typography while maintaining optimal performance.

Why Host Fonts Locally in WordPress?

While typography and custom fonts can improve the overall website aesthetics, they do have a negative impact on your WordPress performance. For example, if you are using a custom font from Google Fonts, then they’re loaded from third-party services which will slow down your website.

Luckily, there is a way to use custom fonts without slowing down your site. A new Webfonts API was introduced in WordPress 6.0. This allows you to host fonts locally so they load faster.

Another reason to host Google Fonts locally is to stay GDPR compliant. That’s an important legal consideration if you have website visitors from the European Union.

When someone visits a website that uses Google Fonts, their IP address is logged by Google when the fonts are loaded. Because this is done without their permission, the EU now considers that a breach of privacy regulations, and you may be liable for damages.

That being said, let’s take a look at how to host local fonts in WordPress for a faster website. We’ll cover two methods, and the first method is recommended for most users.

Method 1: Hosting Local Fonts in WordPress With a Plugin

The first thing you need to do is install and activate the OMGF (Optimize My Google Fonts) plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

OMGF is one of the best WordPress typography plugins. It offers a beginner-friendly way to improve performance and GDPR compliance by hosting Google Fonts locally.

Upon activation, you need to visit Settings » Optimize Google Fonts to configure the plugin. You should be looking at the ‘Optimize Fonts’ tab.

Notice the statement under the ‘Optimize Google Fonts’ heading that you just need to use the default settings to automatically replace your Google Fonts with locally hosted copies.

That means that as you scroll down the settings page, all you need to do is make sure that the ‘Font-Display Option’ has the default setting of ‘Swap (recommended)’ selected.

All you need to do now is click the ‘Save & Optimize’ button at the bottom of the page.

You’ll see a message at the top of the screen that says ‘Optimization completed successfully.’

Congratulations! Your Google Fonts are now hosted locally. Your website will load faster and you have reduced the risk of European lawsuits.

Method 2: Hosting Local Fonts in WordPress Manually

You can also host fonts locally without using a plugin by using the @font-face method from our guide on how to add custom fonts in WordPress. While this method requires more work, it allows you to use any font that you like on your website.

You need to download the fonts you wish to use in a web format. There are many places to find great free web fonts, such as Google Fonts, Typekit, FontSquirrel, and more.

If you do not have the web format for your font, then you can convert it using the FontSquirrel Webfont generator.

Now you need to store the fonts on your WordPress hosting server. You can upload the files using FTP or using your host’s cPanel File Manager.

You should create a new folder called ‘fonts’ in the directory of your theme or child theme and upload it there.

Once you have uploaded the font, you need to load the font in your theme’s stylesheet using custom CSS. You can add the code directly to your theme’s style.css file, or by using the Additional CSS section of the theme customizer.

You can do that using a CSS3 @font-face rule like this:

@font-face {
    font-family: Arvo;
    src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}

Don’t forget to replace the font family and URL with your own.

After that, you can use that font anywhere in your theme’s stylesheet or the Additional CSS section of the theme customizer. The CSS you use will depend on your theme and where you wish to use the local font. Here’s an example from our demo website:

h1 {
font-family: Arvo, Arial, sans-serif;
}

As you can see, our heading is now using the locally hosted Arvo font.

Expert Guides on Fonts in WordPress

Now that you know how to host local fonts, you may like to see some other guides related to using fonts in WordPress.

• What is a Web Safe Font + 19 Best Web Safe Fonts
• How to Change Fonts in Your WordPress Theme (Easy Ways)
• How to Easily Change the Font Size in WordPress
• How to Add Custom Fonts in WordPress
• How to Make Google Fonts Privacy Friendly
• How to Disable Google Fonts on Your WordPress Website
• How to Easily Add Icon Fonts in Your WordPress Theme
• Best WordPress Typography Plugins to Improve Your Design

We hope this tutorial helped you learn how to host local fonts in WordPress for a faster website. You may also want to see our guide on how to increase your blog traffic, or our expert pick of must-have WordPress plugins to grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.