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.

Author

Ohad Raz
Ohad Raz

24 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 );

  6. If it doesn’t work for you read the post again.

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

    I did the same mistake. 😀 Ohad Raz should highlight this part of the post.

  7. Not sure if this is SASS or what language this is but I have no idea where I’m suppose to be putting the block of code, not very descriptive. I’ve been trying to put it into the CSS thinking that it will compile it since I’m thinking its SASS but I have no idea. Please fix, and or add a descriptive as to what file or place I’m supposed to put this. Or just add a block that allows us to set custom fonts to swap rather then making us put in code… Google fonts already have support why doesn’t it automatically set custom fonts as well. Seems redundant for no reason.

  8. In the @font-face rule of the icon folder that you need to upload, you need to put in the text “font-display: swap;”. This will ensure that your icons are displayed properly. Icons that have already been uploaded can be updated in the uploads folder if you havsame. However, the data might not be visible to Google page speed due to your caching system.

Leave a Reply

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