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.

Share on facebook
Share on twitter
Share on linkedin

Author

Ohad Raz
Ohad Raz

Comments

20 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.

  3. Thank you!

    Can you please also address this with the Custom Fonts too?

    Google Pagespeed is looking for Display Swap on all font (.woff2) files.

    Would be much appreciated!

  4. For icons, the icon folder that you have to upload includes css. In the @font-face rule of that css, put in “font-display: swap;”. For icons already uploaded, if you have access to the uploads folder, you can do the same. Note that your caching system might prevent Google page speed from seeing the update.

  5. i used this to add swap to the fonts it added swap to poppins font family but not to open sans font family

    add_filter( ‘elementor_pro/custom_fonts/font_display’, function( $current_value, $font_family, $data ) {
    if ( ‘Poppins Font Family’ === $font_family ) {
    $current_value = ‘swap’;
    }
    return $current_value;
    if ( ‘Open Sans Font Family’ === $font_family ) {
    $current_value = ‘swap’;
    }
    return $current_value;
    }, 10, 3 );

Leave a Reply

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