Conditionally preload fonts on mobile devices

The Preload Fonts feature in WP Rocket allows you to preload fonts to improve loading time and site performance. By default, WP Rocket will preload fonts for all the devices and all the pages.

You can customize fonts to preload only for mobile devices.

Customize the following code snippet and add it to the functions.php of your child theme or use a code snippets plugin. Reference: How to add code snippets.

	function rocket_mobile_preload_fonts( $fonts ) {
		$fonts = [];
		$fonts[] = '/wp-content/themes/example/font_1.woff';//edit this line
		$fonts[] = '/wp-content/themes/example/font_2.woff';//edit this line
		return $fonts;
	}
	if( wp_is_mobile() ) {
		add_filter( 'rocket_preload_fonts', 'rocket_mobile_preload_fonts');
	}

Prerequisites: 

• The Mobile Cache option has to be active.
• Fonts must be hosted on your own domain, or the domain you have specified on the CDN tab.
• Preload desktop fonts by using the Preload Fonts text box.
• The array in the code snippet above will be used to preload fonts on mobile devices. 
• If a font needs to be preloaded on both desktop and mobile, it should be added in both places: Preload Fonts text area and the code snippet.

Prerequisites before WP Rocket 3.16:

• Separate cache files for mobile devices option has to be enabled.