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: 

  • Separate Cache Files for mobile devices option in the Cache tab has to be enabled;
  • 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 area in the Preload tab;
  • 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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.