Remove Google Fonts from a WordPress Theme

Remove Google Fonts from a WordPress Theme

Worried about sending traffic to Google’s servers, for privacy or other reasons? Well, then! Using a really basic child theme—you really shouldn’t modify theme files directly, as your changes won’t survive security and other updates!—let’s remove at least one call to Google Fonts from your WordPress website.

Note: I’ll be using Twenty Seventeen as an example, but most of what follows really applies to other themes as well. Also, there are plugins to disable Google Fonts, too. If you don’t mind a bit of tinkering, however, please read on.

Creating a Child Theme

Let’s first create a child theme for Twenty Seventeen, WordPress’s previous default theme. (Like most themes by Automattic, it is based on Underscores and loads a Google Fonts stylesheet by hooking into wp_enqueue_style.) The Theme Developer Handbook has a pretty clear guide, so let’s get going. (We’ll adapt things where needed, but only slightly.)

Inside wp-content/themes, create a brand-new folder and name it twentyseventeen-child, for now. Then, add empty style.css and functions.php files. These two files are all there is to our child theme!

Using your favorite text editor, add the following to style.css, in order to allow WordPress to detect our child theme at all. Note the Template bit, which informs WordPress about the parent theme.

/*
 Theme Name:  Twenty Seventeen Child
 Description: A Twenty Seventeen Child Theme
 Author:      John Doe
 Template:    twentyseventeen
 Version:     0.1
*/

Alright! Now head over to WP Admin > Themes and activate Twenty Seventeen Child.

Added benefit: we can later use this stylesheet to add custom CSS to our theme, rather than rely on WordPress’s built-in custom CSS editor. (Both approaches have their pros and cons.)

Removing Google Fonts (While Loading the Correct Stylesheet)

By default, Twenty Seventeen calls get_stylesheet_uri(), which loads the current theme’s stylesheet, i.e., our empty—well, aside from the header we’ve just added—CSS file.

We plan to still use our parent theme’s styles, though, and must thus register them before Twenty Seventeen does—WordPress won’t re-register already enqueued stylesheets—by hooking into wp_enqueue_scripts with a low enough priority. (The default is 10.)

Next up is telling WordPress to refrain from loading the (Google) fonts stylesheet, using the same hook, but with a high enough prio, to ensure it runs after any other callbacks, so that Twenty Seventeen won’t go and re-add it behind our backs.

<?php
add_action( 'wp_enqueue_scripts', function() {
  // Load our parent theme's styles first.
  wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
}, 9 ); // A rather low prio.

add_action( 'wp_enqueue_scripts', function() {
  // Do _not_ load its fonts stylesheet.
  wp_dequeue_style( 'twentyseventeen-fonts' );

  // Bonus: add additional child theme styles.
  wp_enqueue_style( 'twentyseventeen-child-style', get_stylesheet_uri(), array( 'twentyseventeen-style' ) );
}, 99 ); // A somewhat high prio.

With these changes applied, the site looks just like before, sans Google Fonts. Finally, we can also re-add our child theme styles, under a different name.