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.

Liked This Article?

We have a lot more where that came from! Join 3,362,148 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ohad Raz
Ohad Raz

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

11 Responses

  1. Hi Ohad,

    Thank you for this article !
    Where can I find and customize this filter ?

    Thank you in advance for your answer !

    Julien

  2. Hi, is anyone else having an issue with this filter? I have included in my functions.php file as suggested however the font-display does not switch from auto to swap.

    I have got two custom fonts loaded and have tried multiple methods however to not avail.

    Any support would be greatly appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *