Elementor Pro 2.7: Custom Fonts `font-display` support

Elementor Pro 2.7 will add support for the font-display property which defines how font files are loaded and displayed by the browser.

This feature was widely requested ( #5993 ) so it is implemented with a default value of auto which is the equivalent to not having it at all.

You can now modify the value to block,swap,fallback,optional via a filter we added, ex:

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	return 'swap';
}, 10, 3 );

After adding the code above, you will need to regenerate the CSS via Elementor > Tools > Regenerate CSS on your WordPress Dashboard.

This will set all Elementor Pro Custom Fonts font-display to swap.

As can be seen, the filters’ callback accepts 3 arguments:

• $current_value – (string) defaults ‘auto‘ the value filtered.
• $font_family – (string) the current font family.
• $data – (array) the current font data config.

You can use that to set different values based on your needs, ex, change only font family named ‘Lobster’ font-display to block:

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	if ( 'Lobster' === $font_family ) {
		$current_value = 'block';
	}
	return $current_value;
}, 10, 3 );

Trouble shooting:

If you add your custom filter to alter the font-display property after you have uploaded you custom fonts, you need to regenerate the font-face CSS, which can be easily done by:

1. Head over to the Custom fonts screen at Elementor > Custom Fonts. 
2. Edit the custom font you want to regenerate (simple edit and update, no changes are needed).
3. Repeat step 2 for each font you want to regenerate.
4. Head over to Elementor > Tools > click on the Regenerate Files.

This needs to be done every time you change the value of font-display via this hook.