How to Improve Your Mobile Core Web Vitals: Quick Tip

Ciprian on Tuesday, April 20, 2021 in Blog
Last modified on Monday, April 19, 2021

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.

Like1