How To Remove Google Fonts From WordPress Completely

Google Fonts helps you in adding remarkable and good-looking, free fonts on your WordPress website without your users having to install these fonts on their local computer. But, not everyone wants to use Google fonts on their website, and in some cases, premium themes load too many Google font styles and fonts which eventually makes the website slow. In order to solve this issue, you have to remove Google fonts from WordPress partially or completely if you want to use the system font stack or local fonts instead.

But, most themes don’t let you remove/deregister Google fonts completely. So, you either need to use some codes to manually remove these fonts or use some plugin(s) to achieve this.

To make things simple and intuitive, I am going to use a simple but powerful plugin called “Asset CleanUp: Page Speed Booster“. With this plugin, you can do many more things such as minifying, compressing, turning off WordPress features and adding an extra layer of security, etc. I will write up a few more tutorials to cover this plugin in-brief.

For now, I will focus on getting rid of these Google fonts.

Let’s get started.

Step #1: Go to your Plugin dashboard in WordPress, click on “Add new plugin” and search with the term “Asset CleanUp”. If you are having trouble finding the right plugin, make sure to look for the one developed & maintained by “Gabe Livan“.

01 Remove Google Fonts Find the plugin min

Step #2: Install this plugin and activate this plugin.

Step #3: Once activated, the plugin will take you to the intro page where you can learn more about the plugin.

02 Remove Google Fonts Activate The Plugin min

Step #4: Click on the “Settings” option in the Asset CleanUp menu section to the settings panel.

03 Remove Google Fonts Go to settings min

Step #5: Enable the “Test Mode” to avoid breaking your website (I recommend using this plugin on a staging site instead).

04 Remove Google Fonts Enable Test Mode min

Step #6: Avoid all the other settings and head over to the “Google Fonts” settings panel.

05 Remove Google Fonts Go to remove fonts panel min

Step #7: You can tweak a lot of settings here such as:

  • Combine multiple requests into fewer ones
  • Apply font-display property
  • Enable preconnect (connect to Google font resources while loading other resources on the page. This helps in reducing the page loading time.)

If you want to tweak these settings instead of removing Google fonts, you can do it from here.

If you are not familiar with these settings, you should test them in a staging site or tweak the settings in the “Test Mode” to avoid any problems.

Step #8: Now, head over to the “Remove All” panel. This is where you can remove all your Google fonts at once. Remove Google fonts may result in some weird looking text-content in the front-end. To avoid such issues, add a default font-stack to take care of this issue.

Click on the “Remove Google Fonts” toggle button to activate this setting.

06 Remove Google Fonts Go to remove All panel min

Once activated, all your Google fonts will be deregistered and you will have to turn this setting off in order to bring them back.

Step #9: Adding some default system fonts to make sure that your website looks and feels good to the visitors.

Adding the following styles to your theme’s style.css file or use a custom CSS plugin to do the same.

.body {

font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

If you are using a custom CSS plugin, you will not have to do anything else as it will load the new styles on top of everything else.

That’s it. You don’t have to tweak any other setting.

If all seems working fine in the front-end of your website, you can simple deactivate the “Test mode” to publish these settings.

Conclusion: Remove Google Fonts From WordPress

Many websites these days depend on system font stack and local fonts instead of using Google fonts. The main reason for this might be the Google font caching issue. Now, Google fonts aren’t being cached. So, each time you load a website, Google fonts are loaded regardless of whether the visitor has loaded the same font file on a different website.

With the web becoming a playground for fast, progressive applications, having the fastest website can help you in getting some extra traffic from Google.

As of today, Google hints that a website must load in under 3 seconds. In future, they may want you to build even faster websites.

What do you think? Should you use Google fonts or depend on system font stack to make the text based content look good?

Share your thoughts in the comment section below.

Related Posts: