Removing Google fonts with PHP code in WordPress

If there are only a few Google fonts loaded by a theme/plugin and you want to remove them by yourself without a plugin, here are ways to do that with a few lines of PHP code.

There are two ways:

  • Find out the code that registers Google fonts with a handle name, then remove those handles one by one. This applies when you know which fonts to remove and reserve the rest.

  • Remove all the handles of fonts each of which is registered with an URL containing 'fonts.googleapis.com' at one time. This applies when you know which fonts to reserve and remove the rest.

You can put the code inside the functions.php of a child theme or create a new plugin to do that (See more at Ways to custom WordPress, it is pretty simple).

Way 1. Remove a font with a known handle

Assume you want to remove the Google fonts added by a theme in which the code adding fonts may like this:

function thetheme_enqueue_scripts () {
    wp_enqueue_style('thetheme-fonts',
        'https://fonts.googleapis.com/css?family=Libre+Franklin');
}
add_action('wp_enqueue_scripts', 'thetheme_enqueue_scripts');

The function thetheme_enqueue_scripts() registers Google fonts with a stylesheet handle named as thetheme-fonts (the first parameter passed to wp_enqueue_style()). Then it is added to action wp_enqueue_scripts with a default priority (10).

Stylesheet handle

The handle is used to identify a stylesheet to be added to a page. In the final HTML file, it is attached with -css and used as the id of a “ tag.

Then you can remove it with below code:

function mycustom_remove_google_fonts() {
    wp_dequeue_style('mytheme-fonts');
}
add_action('wp_enqueue_scripts', 'mycustom_remove_google_fonts',
    PHP_INT_MAX);

Here mycustom_remove_google_fonts() passes the handle thetheme-fonts to wp_dequeue_style() to remove the associated stylesheet.

Note we can only remove a stylesheet which has been registered. Therefore we add our action with a higher value of priority to make sure it is called at a later point.

Way 2. Remove all fonts from fonts.googleapis.com

Below code removes all fonts from fonts.googleapis.com but the font registered with the handle myplugin-fonts.

 function mycustom_remove_google_fonts () {
    // The fonts to be reserved.
    $reserved_font_handles = [
        'myplugin-fonts' => true,
    ];

    // Remove all styles whose src contains 'fonts.googleapis.com' except those reserved.
    $wp_styles = wp_styles();
    foreach ($wp_styles->registered as $style) {
        if (strpos($style->src, 'fonts.googleapis.com') !== false ) {
            $handle = $style->handle;
            if (!array_key_exists($handle, $reserved_font_handles)) {
                wp_dequeue_style($handle);
            }
        }
    }
}
add_action('wp_enqueue_scripts', 'mycustom_remove_google_fonts', 
    PHP_INT_MAX);

Note if you are using Google Ads plan, it may adds Google fonts and you should take care of that and better only remove the known Google fonts loaded by plugins/themes.

Resource

Adding preload links with PHP code in WordPress

A preload link is a  element with preload as value of its rel attribute. It does not load resources, just tell the browser to download and cache the resource with a high priority. Preloading the resources that block rending can improve performance.

A preload link example:

<link rel="preload" href="style.css" as="style">

Faster WordPress rendering … mentions how the author improves website performance by a few server configuration to preload two render-blocking CSS files. But the methods (HTTP2 Push) mentioned in it may not work for you.

Let’s see how to directly add preload links within the “ section for the resources which you want preload earlier for a better performance.

Note

You should only preload the critical resources, like the most render-blocking resources. You can test your page at webpagetest.org to check which are render-blocking resources.

You can put the code in a child theme or in your own plugin. See Create your own plugin for custom for more details.

About preload link

A preload link may have below attributes except rel=preload:

  • href Mandatory. The path of the resource.

  • as Mandatory. The type of the resource.

  • type The MIME type of the resource. It is specially helpful — the browser can use it to find out if it supports that resource, and will only download it if so, ignoring it if not.

  • media It allows you do responsive preloading. Like you can specify narrow images for media="(max-width: 600px)" and big image for media="(min-width: 601px).

  • crossorigin It is needed when preloading resources that are fetched with CORS enabled(e.g. fetch()XMLHttpRequest or fonts).

    An example:


    Because of various reasons, fonts have to be fetched using anonymous-mode CORS. We must set crossorigin for it even it is not cross-origin here.

Add preload links in WordPress 6.1 or higher

WordPress 6.1 has added support for preload links. You can use wp_preload_resources to add your own preload links.

Below code preload a CSS file from the theme.

function mycustom_add_preload_resources ($preload_resources) {
    $preload_resources[] = array(
        'href' => get_stylesheet_directory_uri() . '/style.css?ver=3.1',
        'as' => 'style',
        'type' => 'text/css',
        'media' => 'all',
    );
    return $preload_resources;
}
add_filter('wp_preload_resources', 'mycustom_add_preload_resources');

Then a preload link like below will occur in the head element of final page HTML:

<link rel="preload"
  href="http://myexmple.com/wp-content/themes/mytheme/style.css?ver=3.1"
  as="style" type="text/css" media="all"> 

Note the original link which actually load the same CSS file will still occur as before.

<link rel="stylesheet" id="mytheme-style-css"
  href="http://myexmple.com/wp-content/themes/mytheme/style.css?ver=3.1"
  media="all"> 

Add preload links in WordPress 6.0 or lower

The wp_head action hook allows you to print content which will be present within the “ section.

<?php
function mycustom_add_preload_links () {
    $style_uri = get_stylesheet_directory_uri() . '/style.css?ver=3.1';
    ?>

    <link rel="preload" href="<?php echo $style_uri; ?>" as="style" type="text/css" media="all">

    <?php
}
add_action('wp_head', 'mycustom_add_preload_links', 5);

Check the effect

You can check the loading waterfall in the DevTools of Chrome or test it in webpagetest.org to see whether the resources are loaded earlier.

Another way to accelerate CSS loading is to inline them directly in the “ of the HTML. [Jetpack Boost](Jetpack Boost: WordPress Speed Optimization Plugin) plugin provides this feature. See how to do that with tools by yourself at Extract critical CSS.

Resource