How to Disable Google Fonts on Your WordPress Website

Why Disable Google Fonts on Your WordPress Website?

While Google Fonts are a fantastic resource for adding beautiful typography to your website, using them directly from Google’s servers can have some drawbacks. Disabling Google Fonts and hosting them locally can improve your website’s performance, enhance user privacy, and give you more control over the fonts used on your site.

Performance Benefits

Loading fonts from external servers adds extra HTTP requests to your page load time. Each request, no matter how small, introduces latency. By hosting fonts locally, you eliminate these external requests, leading to faster loading times, especially for users with slower internet connections.

Privacy Considerations

When a user visits your website and Google Fonts are loaded from Google’s servers, Google collects data about the user’s IP address, browser type, operating system, and the pages they visit. This data collection raises privacy concerns, especially in light of GDPR and other privacy regulations. Hosting fonts locally eliminates this data transfer to Google.

Control and Customization

By hosting your own fonts, you have complete control over which fonts are used and how they are served. You can also modify the font files themselves if needed, allowing for greater customization.

Methods to Disable Google Fonts

There are several ways to disable Google Fonts on your WordPress website. We’ll cover some of the most popular and effective methods.

Using WordPress Plugins

Plugins provide a simple and often code-free way to disable Google Fonts. Many plugins are available, each with its own features and interface. Here are a few popular options:

• Disable Google Fonts
• OMGF – Optimize My Google Fonts
• Perfmatters

Let’s look at the steps for using one of these plugins (Disable Google Fonts):

1. Install and activate the “Disable Google Fonts” plugin from the WordPress plugin repository.
2. Once activated, the plugin typically works automatically. There is usually no configuration required.
3. Check your website’s source code or use a browser developer tool to confirm that Google Fonts are no longer being loaded.

The advantage of using a plugin is its ease of use, especially for those who are not comfortable editing code. However, be mindful of plugin bloat. Too many plugins can slow down your website, so choose plugins carefully and only install those that you truly need.

Manually Dequeueing Google Fonts

For those comfortable with code, manually dequeueing Google Fonts offers a more direct and potentially more efficient approach. This method involves removing the registered Google Fonts stylesheets from your theme’s or child theme’s functions.php file.

Before making any changes to your theme’s files, it’s highly recommended to create a child theme. This prevents your changes from being overwritten when the theme is updated.

1. Create a child theme for your current WordPress theme (if you don’t already have one).
2. Locate the functions.php file in your child theme directory.
3. Open the functions.php file and add the following code snippet:

function remove_google_fonts() {
    wp_dequeue_style( 'your-theme-google-fonts' );
    wp_deregister_style( 'your-theme-google-fonts' );
}
add_action( 'wp_enqueue_scripts', 'remove_google_fonts', 20 );

Important: Replace 'your-theme-google-fonts' with the actual handle used by your theme to register the Google Fonts stylesheet. You can find this handle by inspecting your website’s source code or by consulting your theme’s documentation.

To find the correct handle, view the source code of your webpage (usually by right-clicking and selecting “View Page Source”). Search for the URL of the Google Fonts stylesheet. The handle is typically the name used to register the stylesheet before the URL is enqueued.

After adding the code to your functions.php file, save the changes and clear your website’s cache. Check your website to ensure that Google Fonts are no longer being loaded.

Using a Theme’s Options Panel

Some WordPress themes provide built-in options to disable Google Fonts directly from the theme’s options panel. This is often the easiest method if your theme supports it.

1. Navigate to your theme’s options panel (usually found under Appearance > Theme Options or a similar menu item).
2. Look for a setting related to Google Fonts. It might be labeled “Disable Google Fonts,” “Load Fonts Locally,” or something similar.
3. Enable the option to disable Google Fonts.
4. Save the changes to your theme options.

Refer to your theme’s documentation for specific instructions on how to disable Google Fonts using the theme’s options panel.

Hosting Fonts Locally

Once you’ve disabled Google Fonts, you’ll need to host the fonts locally to maintain your website’s design. There are several ways to do this:

Using WordPress Plugins for Local Font Hosting

Many plugins that disable Google Fonts also offer the option to download and host the fonts locally. Plugins like “OMGF – Optimize My Google Fonts” are specifically designed for this purpose.

Here’s a general overview of how to use a plugin to host fonts locally:

1. Install and activate a plugin that supports local font hosting.
2. Configure the plugin to scan your website for used Google Fonts.
3. The plugin will download the necessary font files to your server.
4. The plugin will update your website’s code to load the fonts from your local server instead of Google’s servers.

Refer to the plugin’s documentation for specific instructions on how to use it to host fonts locally.

Manually Hosting Fonts

You can also manually download the font files and upload them to your website’s server. This method requires more technical knowledge but gives you complete control over the font files.

1. Identify the fonts used on your website.
2. Download the font files (TTF, OTF, WOFF, WOFF2) from a reputable source like Google Fonts or a font foundry.
3. Create a “fonts” directory in your theme’s or child theme’s directory.
4. Upload the font files to the “fonts” directory.
5. Add CSS code to your theme’s stylesheet (style.css) to declare the fonts and specify their locations.

Here’s an example of the CSS code you might use:

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
         url('fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Bold.woff2') format('woff2'),
         url('fonts/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

Replace 'Open Sans' with the actual font family name and 'fonts/OpenSans-Regular.woff2' and 'fonts/OpenSans-Bold.woff2' with the correct paths to your font files.

After adding the CSS code, save the changes to your stylesheet and clear your website’s cache. Check your website to ensure that the fonts are loading correctly from your local server.

Verification and Troubleshooting

After disabling Google Fonts and hosting them locally, it’s crucial to verify that the changes have been implemented correctly and to troubleshoot any issues that may arise.

Verify the Changes

Use your browser’s developer tools (usually accessible by pressing F12) to inspect your website’s network requests. Look for any requests to Google Fonts servers (fonts.googleapis.com or fonts.gstatic.com). If you see any requests to these servers, it means that Google Fonts are still being loaded.

• Open your browser’s developer tools.
• Go to the “Network” tab.
• Filter the requests by “Font.”
• Check if any requests are being made to Google Fonts servers.

Troubleshooting Common Issues

• Fonts not loading: Double-check the paths to your font files in your CSS code. Ensure that the font files are uploaded to the correct directory.
• Font styles not applied correctly: Verify that you’ve declared all the necessary font weights and styles (e.g., normal, bold, italic) in your CSS code.
• Website layout broken: If disabling Google Fonts causes your website’s layout to break, it may be due to the theme relying heavily on specific Google Fonts. Try using a fallback font stack in your CSS to maintain the visual appearance.

By carefully following these steps, you can successfully disable Google Fonts on your WordPress website, host them locally, and improve your website’s performance, privacy, and control.