php wordpress woocommerce fonts pagespeed

How to remove very heavy "Inter" font from WooCommerce?

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?

Solution

By searching a bit, the font is apparently added by ComingSoonRequestHandler class within experimental_filter_theme_json_theme function hooked in wp_theme_json_data_theme filter hook.

To remove it, try the following:

add_filter( 'wp_theme_json_data_theme', 'disable_inter_font', 100 );
function disable_inter_font( $theme_json ) {
    $theme_data = $theme_json->get_data();
    $font_data  = $theme_data['settings']['typography']['fontFamilies']['theme'] ?? array();

    // The font name to be removed
    $font_name = 'Inter';

    // Check if 'Inter' font exists
    foreach ( $font_data as $font_key => $font ) {
        if ( isset( $font['name'] ) && $font['name'] === $font_name ) {
            // Remove the font
            unset($font_data[$font_key]); 
            
            // Update font data
            $theme_json->update_with( array(
                'version'  => 1,
                'settings' => array(
                    'typography' => array(
                        'fontFamilies' => array(
                            'theme' => $font_data,
                        ),
                    ),
                ),
            ) );
            break;
        }
    }
    return $theme_json;
}

Code goes in functions.php file of your child theme (or in a plugin). It should work.