By using’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor

    Join us!
elementor official

Can't use `Display Font` Featuer, please help me!



New Member
Hello there, I have 2 customs fonts added through Elementor custom fonts.
As you can see of the 2 fonts, one is called vlaue-serif, and the other is called Apercu.
I need to be able to use the `Display Font` feature that should now be implemented in Elementor.

so I followed this guide on this link:

but I'm afraid I'm doing something wrong .... where does this code go, will it be in functions.php?

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ){if ( 'value-serif' === $font_family ){$current_value = 'block';
    return $current_value;
}, 10, 3 );

Becuase I placed it in Functions.php / then changed font to VALUE-SERIF in the code as you can see, saved the changes and regenerated CSS files ...
however, still with GOOGLE PAGE INSIGHTS I get:

"Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. "

I tried plying with the VALUE and changed it to SWAP / still didn't work, also WITHIN that code above, can I separate 2 FONTS next to ===$font-family with a Comma ,


  • fonts.jpg
    23.9 KB · Views: 82

Latest posts

Latest Resources

Other Elementor Resources

elementor official