Stunning typography enhances your website’s design and engages your visitors.
However, while optimizing our website’s performance, we found that using third-party font services can slow down WordPress, negatively impacting user experience and potentially harming your SEO rankings.
We identified several methods to tackle this issue, one of which is hosting fonts locally.
By managing your font files directly, your website can eliminate unnecessary loading steps, resulting in a faster site with improved user experience and better SEO outcomes.
In this article, we will guide you on how to host local fonts in WordPress, enabling you to elevate your site’s typography while ensuring peak performance.
Benefits of Hosting Fonts Locally in WordPress
While custom fonts and typography can enhance the visual appeal of your website, they can also negatively affect WordPress performance. For instance, using a custom font from Google Fonts means it is loaded from external services, which can slow down your site.
Fortunately, you can utilize custom fonts without compromising your site’s speed. The new Webfonts API introduced in WordPress 6.0 allows you to host fonts locally for faster loading times.
Hosting Google Fonts locally helps ensure compliance with GDPR, which is crucial if your website attracts visitors from the European Union.
When a user accesses a website utilizing Google Fonts, their IP address is recorded by Google during the font loading process. This action occurs without user consent, leading the EU to classify it as a violation of privacy laws, potentially exposing you to legal repercussions.
Now, let’s explore how to host local fonts in WordPress to enhance your website’s speed. We will discuss two methods, starting with the one that is most suitable for the majority of users.
- How to Host Local Fonts in WordPress Using a Plugin
- How to Host Local Fonts in WordPress Manually
- Comprehensive Guides on Fonts in WordPress
Method 1: How to Host Local Fonts in WordPress Using a Plugin
First, you need to install and activate the OMGF (Optimize My Google Fonts) plugin. For detailed instructions, refer to our step-by-step guide on installing a WordPress plugin.
OMGF is among the top WordPress typography plugins, providing an easy-to-use solution for enhancing performance and ensuring GDPR compliance by hosting Google Fonts locally.
After activation, navigate to Settings » Optimize Google Fontsto set up the plugin. Navigate to the ‘Optimize Fonts’ tab.
Observe the note under the ‘Optimize Google Fonts’ section indicating that you can simply use the default settings to automatically replace your Google Fonts with locally hosted versions.
As you scroll down the settings page, ensure that the ‘Font-Display Option’ is set to the default choice of ‘Swap (recommended)’.
Now, just click the ‘Save & Optimize’ button located at the bottom of the page.
A message will appear at the top of the screen stating ‘Optimization completed successfully.’
Congratulations! Your Google Fonts are now hosted locally. This will enhance your website’s loading speed and minimize the risk of legal issues in Europe.
Method 2: Manually Hosting Local Fonts in WordPress
You can also host fonts locally without a plugin by utilizing the @font-face method from our guide on adding custom fonts in WordPress. Although this approach requires more effort, it gives you the flexibility to use any font you desire on your site.
You need to download the fonts you want to use in a web-compatible format. There are numerous sources for excellent free web fonts, including Google Fonts, Typekit, FontSquirrel, and others.
If you don’t have the web format for your font, you can easily convert it using the FontSquirrel Webfont Generator.
Next, you need to upload the fonts to your WordPress hosting server. You can do this via FTP or through your hosting provider’s cPanel File Manager.
Create a new folder named ‘fonts’ in your theme or child theme directory, and upload the font files there.
After uploading the font, you need to include it in your theme’s stylesheet using custom CSS. You can add the code directly to your theme’s style.css file or use the Additional CSS section in the theme customizer.
You can accomplish this with a CSS3 @font-face rule like the following:
@font-face{ font-display:swap; font-family: Arvo; src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf); font-weight: normal;
}
Remember to replace the font family and URL with your specific details.
Once that’s done, you can use the font throughout your theme’s stylesheet or in the Additional CSS section of the theme customizer. Here’s an example from our demo website:
h1 {
font-family: Arvo, Arial, sans-serif;
}
Our heading now features the locally hosted Arvo font.
Comprehensive Guides on Fonts in WordPress
We hope this tutorial has helped you learn how to host local fonts in WordPress for improved website speed. You may also find these additional guides on using fonts in WordPress helpful:
- What is a Web Safe Font? Discover 19 Top Web Safe Fonts
- Simple Methods to Change Fonts in Your WordPress Theme
- A Quick Guide to Adjusting Font Size in WordPress
- Step-by-Step Instructions to Add Custom Fonts in WordPress
- Making Google Fonts Privacy-Friendly: A How-To Guide
- How to Disable Google Fonts on Your WordPress Site
- Easily Incorporate Icon Fonts in Your WordPress Theme
- Top WordPress Typography Plugins to Enhance Your Design
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. Connect with us on Twitter and Facebook as well.
