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.
