Faster fonts on mobile

Question

I think I have a great idea to make my site load faster in mobile: "don't load the custom fonts in small screens"

I know how to style/change the font used depending on screen size with media queries and css. What I don't know is how to prevent the custom fonts from loading in small screens. I use google fonts and I enqueue them in functions.php, but I'm open to your workarounds.

Btw, this how to do it, when using @font

Answer 1

WordPress has wp_is_mobile() function to detect mobile and handheld devices. You can use that to define your enqueue function to load fonts conditionally.

You can enqueue fonts for non mobile devices like this.

function my_enqueue_function() {

  if ( !wp_is_mobile() ) {

    wp_enqueue_style( 'gfonts', 'http://fonts.googleapis.com/css?family=Arbutus+Slab', false, NULL, 'all' );

  }

}
add_action( 'wp_enqueue_scripts', 'my_enqueue_function' );

Answer 2

I found this (partial?) solution:

Use wp_is_mobile() when you enqueue your fonts, like this:

function my_scripts() {
    // Load if not mobile
    if ( ! wp_is_mobile() ) {
         wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css?family=Nicefont:400,500' );
    }
    // your other scripts that you enqueue...
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts' );

references: codex and other question

There is also this plug-in, but I think it is overkill for my requirements.