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:
- Head over to the Custom fonts screen at Elementor > Custom Fonts.
- Edit the custom font you want to regenerate (simple edit and update, no changes are needed).
- Repeat step 2 for each font you want to regenerate.
- 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.
24 Responses
Excellent, always loving these useful tips about new developer functionality!
I had a feeling you would 🙂
is there a way to setup two font families to swap using the above code
Hi Ohad,
Thank you for this article !
Where can I find and customize this filter ?
Thank you in advance for your answer !
Julien
Should we add the code you’ve provided into the functions.pho file?
Yes, or in any file being loaded in your website.
How to add Font-display: swap to Elementor’s eicons fonts?
Did you ever find out how to do this for icons?
I’d also love to know how to do this for fontawesome. I’m getting the pagespeed insights error on the FA fonts and don’t know how to add swap to them.
I also want to know how to do this for Font Awesome family. I’ve been searching for a solution for about a week now, but to no avail.
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.
Same for me I have apply the code on fuction.php but there is no changes…
Hi, where/ in which file do I have to add the code snippet?
How can I apply font-display: swap for eicons ?
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!
This is the best post about this topic & thank you for providing this post.
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.
is there a way to setup two font families to swap using the above code
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 );
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.
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.
how can apply font swap snippet to elementor free version
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.