How to Improve Your Mobile Core Web Vitals: Quick Tip

Do you really need those fancy fonts on mobile devices? No? There’s your answer!

This applies to any WordPress theme, but it also applies to non-WordPress websites.

Here’s my approach, which brought 10+ points in Google PageSpeed Insights for my mobile version. First, enqueue Google Fonts (or local custom fonts) for desktop version only, using a CSS media query:

function my_theme_load_assets() {
    wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&family=Red+Hat+Display:wght@400;500;700&display=swap', [], '1.0.0', 'screen and (min-width: 480px)');
}

add_action('wp_enqueue_scripts', 'my_theme_load_assets');

Note the last argument which defaults to all, but it can take any CSS media query – screen and (min-width: 480px) in my case.

Second, use another CSS media query, to use native fonts for mobile devices:

@media only screen and (max-width: 480px) {
    body,
    h1, h2, h3, h4, h5, h6,
    .selector-1,
    .selector-2,
    .selector-3 {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    }
}

That’s all you need to do. Depending on your site’s audience and design, the native fonts may be a better alternative for mobile devices to your fancy desktop ones.