One feature that can influence the performance of your site is the way the font is loaded. This is solved with a simple css property however when you are not working with a builder like Elementor you hope this is not a problem. So… how to include the font-display: swap property in elementor.
Go into your theme's functions.php file and include:
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
return 'swap';
}, 10, 3 );Save the changes and then go to the Elementor > Tools section and click on Regenerate files and data.
By default this property appears in “auto” value, with the previous function you can change it according to what you need: block, swap, fallback, optional. However, to improve the speed of your site we recommend that you always keep it as font-display:swap
However, for reasons related to your design, you may need something to look ONLY with a specific font. With the above function you can solve it. If you look closely, it also accepts other parameters that will allow you to customize the way your sources should be displayed. For example:
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
if ( 'Poppins' === $font_family ) {
$current_value = 'swap';
}
return $current_value;
}, 10, 3 );Why is this important to consider? Well, it is a good practice according to Google to keep the text visible at all times, and the loading of the font will always have a certain delay to be loaded.
