October 22, 2024
Chicago 12, Melborne City, USA
PHP

How can I stop WooCommerce from loading the Inter font on my product page?


I’m using WooCommerce on my WordPress site, and I noticed that it is loading a large font file called Inter-VariableFont_slnt,wght.woff2.

This font file is as large as my entire page and is significantly slowing down the loading speed and blocking my FCP. My theme (Uncode) is already loading all the fonts I need, so I don’t need WooCommerce to load any additional fonts.

What I’ve Tried So Far:

  • I have enabled the "Disable WC Blocks Style" option in my uncode theme settings.

  • I added the following code to dequeue the WooCommerce block styles and font assets, but the font is still being loaded:

    function remove_woocommerce_font_styles() {
        wp_dequeue_style('wc-blocks-vendors-style');
        wp_dequeue_style('wc-blocks-style');
    
        if (wp_style_is('wp-fonts-local', 'enqueued')) {
            wp_dequeue_style('wp-fonts-local');
        }
    }
    add_action('wp_enqueue_scripts', 'remove_woocommerce_font_styles', 20);
    
  • I’ve also cleared all caching, but the font is still being loaded on my product pages.

Additional Information:

The font seems to be added via an inline <style> block with the ID wp-fonts-local:

<style id="wp-fonts-local" type="text/css">
@font-face{font-family:Inter;font-style:normal;font-weight:300 900;font-display:fallback;src:url('https://example.com/wp-content/plugins/woocommerce/assets/fonts/Inter-VariableFont_slnt,wght.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:Cardo;font-style:normal;font-weight:400;font-display:fallback;src:url('https://example.com/wp-content/plugins/woocommerce/assets/fonts/cardo_normal_400.woff2') format('woff2');}
</style>

What I’m Looking For:

I would like to stop WooCommerce from loading this font file entirely, without resorting to removing it with JavaScript after the page has loaded, as this still results in the font being downloaded. I need a clean way to dequeue or prevent the font from being enqueued.

Does anyone know how I can stop WooCommerce from loading this font on my product pages?



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video