Enable font swap for Google Fonts in Divi

by | Sep 10, 2019 | With Code

Enable font swap for Google Fonts in Divi

You may have seen the message “Ensure text remains visible during webfont load” when scanning your website performance. Google recommends using font-swapping.

Google enabled {font-display: swap} on their Google Fonts service, but Divi has yet to add it as an option or default. Unfortunately, the function we need to override isn’t setup for overriding, so we need to remove it and add its slightly modified replacement.

Just add this to your Divi child theme’s functions.php file.

// Remove Divi's function
add_action( 'init', function () {
	remove_action( 'wp_enqueue_scripts', 'et_builder_preprint_font' );
});

// Add our modified font-swapper
function et_builder_preprint_font_replacement() {
	// Return if this is not a post or a page
	if ( ! is_singular() || ! et_core_use_google_fonts() ) {
		return;
	}

	$post_id = get_the_ID();

	$post_fonts_data = get_post_meta( $post_id, 'et_enqueued_post_fonts', true );

	// No need to proceed if the proper data is missing from the cache
	if ( ! is_array( $post_fonts_data ) || ! isset( $post_fonts_data['family'], $post_fonts_data['subset'] ) ) {
		return;
	}

	$fonts = $post_fonts_data[ 'family'];

	if ( ! $fonts ) {
		return;
	}

	$unique_subsets = $post_fonts_data[ 'subset'];
	$protocol       = is_ssl() ? 'https' : 'http';

	wp_enqueue_style( 'et-builder-googlefonts-cached', esc_url( add_query_arg( array(
		'family' => implode( '|', $fonts ) ,
		'subset' => implode( ',', $unique_subsets ),
		'display' => 'swap',
	), "$protocol://fonts.googleapis.com/css" ) ) );
}
add_action( 'wp_enqueue_scripts', 'et_builder_preprint_font_replacement', 10, 2 );
PHP

This code replaces the original function and adds &display=swap to the webfont across your website. Victory!

Photo by Marc-Olivier Jodoin on Unsplash