Days
:
Hours
:
Minutes
:
Seconds

Tuning - Car Detailing & Dealer WordPress Theme $69 $19

View Now
Skip to content Skip to sidebar Skip to footer

How to Host Google Fonts Locally on WordPress

Learn how to host Google Fonts locally on WordPress to boost performance and ensure privacy compliance with easy step-by-step instructions.

Let’s explore how to manually add Google Fonts to your WordPress site. 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

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

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

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

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.

edit themes

If it supports that option, you can resolve this by switching your theme to a system font stack. 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.

For the Updates

Exploring ideas at the intersection of design, code, and technology. Subscribe to our newsletter and always be aware of all the latest updates.

Leave a comment

Download a Free Theme