Today, every successful business showcases its unique style and personality through its website. These businesses also prioritize delivering an exceptional online experience for their users.
One key element they focus on is text presentation, ensuring that content is valuable and easy to read. To achieve this, many turn to Google Fonts, which offers a wide selection of font options.
While Google Fonts offers a wide array of choices for WordPress sites, they can lead to multiple external requests to Google’s servers. For optimal performance, it’s recommended that these fonts be hosted locally.
If you’re searching for a method to host Google Fonts locally on your WordPress site, you’re in the right place.
In this guide, we’ll show you how to add Google Fonts to your WordPress site, but the process can be applied to any website.
Why Host Fonts Locally?
By hosting Google fonts directly on your server, you can access a wide variety of web fonts without worrying about licensing issues.
Local hosting can also improve performance, eliminating the need for external requests to third-party servers. This reduces load time by cutting out the delay caused by fetching fonts from an external source.
While Google Fonts already offers fast loading through its CDN, especially for popular fonts like Lato or Roboto, local hosting can still offer more consistent performance. If a user’s browser has the font cached, it can load even faster. You can monitor the impact of these external font requests in the Pingdom Tools waterfall chart, which shows how fonts from Google servers are loaded on your site.
Another critical factor is GDPR compliance. Hosting fonts locally helps you avoid potential legal issues related to user data privacy, as it reduces reliance on external services that might collect user data.
Lastly, suppose you’re using fonts from different providers and want to avoid hosting them locally. Having a clear cookie policy on your website can help you stay compliant without requiring local font hosting.
Manually Hosting Google Fonts Locally on WordPress: A Step-by-Step Guide
Let’s explore how to add Google Fonts to your WordPress site manually. Although we’ll use Google Fonts as an example, this method can be applied to any font.
Step 1: Select the Perfect Font for Your Website
Begin by visiting the official Google Fonts website to browse a comprehensive list of trending fonts.
You can filter fonts using the options on the left side or search for a specific font directly.
Step 2: Add Your Chosen Fonts to Your Collection
Once you’ve selected a font, you’ll see the various styles it offers.
You can customize the font size before adding it to your collection.
Step 3: Download the Font Files
After selecting your font, it’s time to download the files. Your chosen fonts will appear in the selected family, and you can download them as a ZIP file containing all font weights.
I suggest downloading only the essential font weights, such as:
- Regular
- Italic
- Bold
Extract the ZIP file and delete any unnecessary font weights.
Preview the responsive settings while editing the options to ensure accuracy.
Step 4: Convert the Font to WOFF Format (If Necessary)
Google Fonts typically provides fonts in TTF format. However, for better cross-browser compatibility, it’s advisable to use WOFF or WOFF 2.0 formats.
If your font isn’t in WOFF format, you can use the free Convertio tool to convert it.
Step 5: Upload the Font Files to Your Server
Next, upload the font files to your server via FTP or cPanel File Manager. If you need help with this, refer to our guide on using FTP with WordPress.
For example, you might create a ‘fonts’ folder in your site’s root directory, as shown in the screenshot.
Step 6: Add CSS for Font Face
Now, it’s time to use the fonts in your site’s CSS. For instance, to apply the Roboto Regular font to all body text, use this CSS:
body {font-family: ‘roboto-regular’, Arial, sans-serif;}
You can add this CSS in the same location as the previous code.
Step 7: Apply the Font to Your Site
After uploading the font files, you must include them in your site’s CSS using the @font-face rule.
You can do this through the Additional CSS tab in the WordPress Customizer or a plugin like Simple CSS. Here’s the necessary CSS code:
@font-face {
font-family: ‘roboto-regular’;
src: url(‘https://your-site.com/fonts/Robot-Regular.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
Be sure to:
- Replace ‘roboto-regular’ with your chosen font’s name.
- Update the URL to point to the correct font file on your server.
Repeat this process for each font file you intend to use.
Step 8: Prevent Your Theme from Loading Google Fonts
If your site continues to load fonts from Google Fonts, your theme might still be set to use them.
You can resolve this by switching your theme to a system font stack if it supports that option. For example, in GeneratePress, you can make this change in the WordPress Customizer.
Alternatively, you can remove the relevant code from your theme’s functions.php file or use a child theme to override it.
To stop Google Fonts from loading in the Divi theme:
- Go to the WordPress dashboard and open the Divi tab.
- Find the Theme Options menu and disable the “Use Google Fonts” and “Google Fonts subsets” options.
For Elementor, navigate to the plugin’s Settings menu, open the General tab, and click the “Disable Default Fonts” option. If Google Fonts still load, you must use a code snippet to disable them entirely.
