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

[MoeNAGY]

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:

developers.elementor.com/elementor-pro-2-7-custom-fonts-font-display-support/#comments..

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 ,