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.
10 Responses
Excellent, always loving these useful tips about new developer functionality!
I had a feeling you would 🙂
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.