FLASH SALE Get 20% OFF everything using the coupon code: FLASH20 View WordPress Plugins →

How to Improve Your Mobile Core Web Vitals: Quick Tip

on in Blog
Last modified on

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.

Google Fonts
Google Fonts

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.

Related posts