in ,

How to Remove Google Fonts from your WordPress Theme

Remove Google Fonts from your WordPress Theme

I’ve been getting a lot of requests lately, to implement a ‘Remove Google Fonts’-option into OMGF.

After a lot of research (a few months!) I managed to implement an efficient way to do it. Version 1.9.0 contains an experimental option to remove any Google Fonts that are enqueued in your WordPress blog.

But, for those where it doesn’t work, or for those that want to have full control, I provided an alternative: a complete guide on how to remove Google Fonts from your WordPress Theme.

Why should I Remove Google Fonts?

Your motivation to remove the externally hosted Google Fonts from your blog may differ. It might be a design or programming choice, but in most cases the reason is site optimization. External requests slow down your site’s loading speed. That’s why it’s a smart choice to move external files to your own server and host them locally. Even Google says so.

The same goes for Google Fonts. But moving them to your server can be quite an exhausting process, especially if you’re using a lot of different fonts, weights and styles. To make this process easier, I created OMGF. A WordPress plugin which downloads the fonts and automatically generates a stylesheet for them.

After configuring OMGF, the remaining step is to remove the external requests to the Google Fonts API. This can be done in three ways, the easiest way (using OMGF’ new experimental feature, the easy way (using Autoptimize), or the hard way (by creating a Child Theme). Today, we’re going to dive into all of them.

Easiest: Use OMGF’ experimental feature

From version 1.9.0 OMGF supports removing Google Fonts using the Experimental feature ‘Remove Google Fonts’. Just check it, save your settings and you’re done!

Easy: Automatically remove Google Fonts using Autoptimize

Another easy way is to use Autoptimize. You should see this as an alternative, if OMGF’ feature is not working for some reason. This might be due to non-default implementations of Google Fonts, or unique customizations on your blog.

A WordPress plugin which I’ve mentioned several times, due its incredible optimization capacities. Simply put, if you want to achieve a high score on Google Pagespeed, Autoptimize’s the way to go. One of its options is — guess what? — it removes Google Fonts.

Contrary to other solutions out there, Autoptimize is actually a one-size fits all solution. It already controls your CSS as it combines and minifies it. So, since it has ALL the data, it can also remove or replace anything inside it. I.e. it can remove Google Fonts in every situation. Here’s how it’s done.

How to Remove Google Fonts using Autoptimize
How to Remove Google Fonts using Autoptimize

Assuming you’ve already installed Autoptimize from the WordPress Plugin Directory, go to its settings page (Settings > Autoptimize) and:

  1. Click on the ‘Extra‘-tab,
  2. Select ‘remove Google Fonts‘ from the Google Fonts options menu,
  3. Click ‘Save‘.

As promised, that was easy, right?

Now, if for some reason you don’t like easy, and you skipped reading this entire chapter, because it was too short and boring for you. Keep reading. Now we’re gonna get down and dirty.

Hard: Manually remove Fonts from WordPress using a Child Theme

This option is mostly convenient, if you’re already running all sorts of custom optimizations on your site, preventing you to install Autoptimize. In mostly all other cases, I seriously suggest you step back to the previous chapter.

The hard way to remove Google Fonts from your WordPress theme involves creating a child theme. You’ll also need a basic understanding of PHP and Bash.

If these words mean nothing to you, you might want to consider hiring me (€ 99,-) to do it for you.

Before contuing, make sure you’ve created a child theme for your theme following the steps from the WordPress documentation. After you’ve activated and verified it’s working, continue.

The steps are the same for every theme, the function name’s will just differ.

Find out which function loads the Fonts

Google Fonts are loaded from an URL looking similar to this:

https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700|Roboto+Slab:400,300,700

So the smartest way to find out the name of the function loading the fonts is to look for it using a terminal command called grep. E.g. grep "googleapis\|gstatic" * -r will return a list of all files containing the word ‘googleapis‘ or ‘gstatic‘. Make sure to trigger this command inside your theme’s folder.

Dequeueing the stylesheet

grep should return one file. Open that file using your favourite IDE (such as PHPStorm or Notepad++) and locate the function containing the Google Fonts URL.

The URL is probably wrapped inside a function called wp_enqueue_style or wp_register_style. What we need from this function is the value of the first parameter, called the ‘handle’. This is what we’ll use to ‘dequeue’ the fonts in our Child Theme’s functions.php.

E.g. in my theme (Sparkling) the fonts are enqueued as follows:

wp_register_style('sparkling-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700|Roboto+Slab:400,300,700');

So I’ll be using the handle ‘sparkling-fonts‘ to dequeue it in my child theme.

We can do this by adding the following code to the Child Theme’s functions.php:

<?php
// The start of my Child Theme's functions.php
function sparkling_remove_google_fonts() {
wp_dequeue_style('sparkling-fonts');
wp_deregister_style('sparkling-fonts');
}
add_action('wp_enqueue_scripts', 'sparkling_remove_google_fonts', 100);
view raw functions.php hosted with ❤ by GitHub

When activating the child theme (make sure you’ve enqueued the parent’s theme styles, etc. as described in the WP dev-docs!) you’ll see that the function loading the Google Fonts isn’t triggered anymore.

Summary

Hosting Google Fonts from your own server can be beneficial to the speed of your WordPress blog, that’s why it is recommed to remove the externally hosted Google Fonts from your WordPress theme. There are many ways to remove Google Fonts from your WordPress theme. In this post I’ve described the easiest way (using OMGF or another plugin) and provided a (harder) alternative (using a Child Theme) for those longing for more flexibility.

Written by Daan van den Bergh

Magento 2 Back-end Developer with a passion for trainlifting, airplane-gliding, hunting trees and creating fake hobbies.

8 Comments

Leave a Reply
  1. Most of the times we have to remove Google Fonts to solve the leverage browser caching issue as you mentioned in your another article on this blog.

    However, for this reason alone, removing or locally hosting google fonts is not the best option because removing fonts will affect the layout and user experience and locally hosting google fonts will increase server bandwidth. As a 3rd option, we use another free opensource fonts library Easy Fonts that is an unofficial fork of Google Fonts and CDN for which is available at https://pagecdn.com/lib/easyfonts

    Using this CDN for fonts not only solves leverage browsing caching issue pointed out by many online performance evaluation tools, but also makes using fonts really easy as documented on the above page, or as explained in this answer: https://stackoverflow.com/a/57073920

    • However, for wordpress sites, currently no plugin provides support for this except for the PageCDN’s own plugin that reads all Google Fonts links and replaces them with better cacheable PageCDN links.

      It would be nice if you can add support for Easy Fonts in your plugin as an optional feature.

      Thanks.

  2. thanks a lot for those info.i try to remove the google font from my theme , astra , but i dont manage to do it… if someone know how to do that , thanks to point me out in the right path.

    BTW thanks for those nice article and pluggin for wordpress .. i use caos too.

    for performance i used autooptimise in past but nowday i use 3 plugin , “fast velocity minify” “powercache” to cache in ram and not on hardrive .. and “asset cleanup” to remove what some plugin load on some page…

    • Have you tried the ‘Remove Google Fonts’ option in OMGF? It’s become pretty enhanced over the past few months. If you can’t manage to remove the fonts using OMGF, please contact me and I’ll see if I can make it compatible with your theme!

One Ping

  1. Pingback:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.