Google Fonts can be a terrific addition to your website. They help improve your site typography significantly. However, loading content from third-party websites can drastically impact the page loading speed. When using Google Fonts, your page needs multiple font files for each family and weight. On other hand, though you might not want to use Google Fonts, specific WordPress themes and plugins may have built-in code that loads them automatically on your site. This post will give you a step-by-step guideline on how to disable google fonts in WordPress site.
How to Check Whether Your Site is Using Google Fonts?
Before disabling the Google Fonts, you first need to confirm whether your site is using these fonts. You can do that by checking the HTTP requests made by your site. There are different tools you use – one of the most known popular is Pingdom.
- Open Pingdom tools and enter your page URL, as shown in the image below.
- Select the server location and click “Start Test” button.
- It may take couple of seconds to load before showing results.
- Scroll down to the “File Request” section and check whether your site is making any request to a Google Fonts URL.
- For example, from the image below, we can see that the tested site is making four requests to the Google URL.
Alternatively, you can check the source code of your site to confirm whether any meta link tags are there. You should see the links to fonts.googleapis.com like below:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">Why Should I Disable Google Fonts?
As much as Google Fonts look great on a website, for some reason, they might compromise the performance of loading speed. That is because the more requests a website makes externally, the more time it takes to load. Nobody wants a slow-loading site. For this reason, removing Google Fonts result in fast loading and good performance speed.
You might as well want to disable Google Fonts in WordPress if you intend to use system stack or premium font. If you are a “privacy” person, then another reason why you should disable Google Fonts from WordPress is the issue of data privacy. There has been a concern in the digital world on as Google tracks the usage of their fonts.
Method 1: Disable Google Fonts With Plugins
The plugin simply removes all Google Fonts references from your website. Good thing about these plugins is that they are free and don’t require any complicated configurations. Of course, you will also have many premium plugins for this purpose. This post will look at three plugins that you can use to disable google fonts on your WordPress.
Disable and Remove Google Fonts Plugin
It is one of the most common plugins used to disable Google Fonts. When this plugin is installed and activated, it automatically removes all traces of Google Fonts from your website. Usually, this process does not require any configurations.
Disable Google Fonts Plugin
It’s a pretty simple WordPress plugin that doesn’t require any configurations. One simply needs to install and activate the plugin. Once activated, it operates immediately. Though it was not updated for years, this plugin is compatible with all default WordPress themes such as Twenty twenty-one, Twenty-twenty among others.
Autoptimize Plugin
It is another way where one can automatically disable Google Fonts in WordPress. All you need to do is install Autoptimize from the WordPress plugin repository. To accomplish that:
- Go to the dashboard of your website and click on the ‘Settings’ menu.
- On the ‘Settings’ menu, click on the ‘Autoptimize’ menu.
- When you click on the ‘Autoptimize’ menu, you will see multiple tabs to optimize, JS, CSS, Images, Extra, Critical CSS, and Optimize more. Click the ‘Extra’ tab section.
- Under the first ‘Extra Auto-Optimizations” section, select ‘Remove Google fonts’ option against “Google Fonts”.
- Finally, scroll down and click ‘Save’ to apply changes.
Method 2: Disable Google Fonts Without Plugin (Code)
If you don’t want to fill your website with multiple plugins, you can remove the Google Fonts by adding few lines of code to your theme. However, it depends on how your theme adds font CSS to load in the frontend. Default themes like twenty-twenty-one and other popular themes enqueue required font styles in theme’s function.php file. In this case, you can simply dequeue the font CSS to disable loading of Google Fonts.
- We will add a new function known as wp_dequeue_style() in the functions.php file to remove the enqueued CSS stylesheet.
- Remember, the font name for each theme varies. For example, twenty-seventeen theme uses the name ‘twentyseventeen-fonts.’ In this post, we will disable Google Fonts on the Twenty Seventeen theme.
- Log in to your WordPress dashboard and open the ‘Theme Editor’ under the ‘Appearance’ menu to get started.
- To get started, click on the ‘Theme Functions’ options, located on the right-hand panel as shown in the image below.
- Click inside the theme editor and use the keyboard combination Ctrl + F to open the search box.
- Type wp_enqueue_style and hit Enter key. Continue pressing Enter until you see a line with the Google Fonts, as shown in the image below.
- Before we dive into editing the functions.php file, you might consider backing up the file if the new configurations raise any errors such as ‘site not loading’ or breaking site’s layout.
- First, let’s add a hook called add_action(). A hook is a piece of code of code in WordPress launched at a specific point during execution. This hook will take in two parameters – wp_print_styles and a new function that we will create. This which simply dequeue the Google Fonts used on your site. The resulting code will look like this.
add_action( 'wp_print_styles', 'theNewFunction' );
function theNewFunction() {
wp_dequeue_style('twentyseventeen-fonts');
}- Past the code at the last of functions.php file.
- That’s it! Click the ‘Update File’ button to apply the changes.
All you need for using this method is to know the font name used in your theme. However, first make sure your theme uses Google Fonts as explained above. Do not disable custom fonts hosted on your server using this method as it will break your site. Similarly, this method will not be useful if your theme import fonts directly using CSS import function.
Conclusion
Those are two methods that you can use to disable Google Fonts on your WordPress site. If you are well versed with coding in PHP, use the second method. If you don’t want to dive into coding, you can use any of the listed plugins, and it will work like a charm. What other methods do you use to disable Google Fonts on your site? Feel free to share with our readers in the comments section.