Custom Font's need "font-display: swap;"

[jar53]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

Custom fonts do not have the option to be able to use font-display: swap; We can manually add it into our WordPress code but that is just a ridiculous amount of work when the Google font-swap button could dynamically work for all fonts including custom fonts. This would help overall Lighthouse scores for all users using this option. This would help load times and ensure that text is loaded on the device even if the font isn't loaded.

Describe the solution you'd like

Simply add another button next to the google font button and or just add the font-display: swap to all fonts including google fonts with the single button.

Describe alternatives you've considered

I can manually add the CSS in Elementor but it doesn't load in time for it to even work. I've tried scripting, as well as CSS and neither of them works, it would be very nice to add this additional work.

Additional context

No response

[jazir555]

Definitely agree, not sure why this isn't already integrated.

[toineenzo]

Wow, I didn't know swap doesn't work with custom fonts?? I normally use custom fonts instead of Google fonts, because it loads much faster, but not supporting (font-display: swap;), is a bit contradictory to having custom fonts for better performance.
Should be easy to implement, I hope.😅

[jar53]

This is how they want us to do it, but I don't understand why this can easily be automated. It should & can, just don't understand why they want the users to do it themselves. If the option is there it should work for all fonts.

https://developers.elementor.com/elementor-pro-2-7-custom-fonts-font-display-support/

[jazir555]

This is how they want us to do it, but I don't understand why this can easily be automated. It should & can, just don't understand why they want the users to do it themselves. If the option is there it should work for all fonts.

https://developers.elementor.com/elementor-pro-2-7-custom-fonts-font-display-support/

For real, if anyone has experience with integrating stuff into Elementor (I don't sorry) I can't see why this couldn't be done in under an hour, the functionality already exists, all they would have to do is make a dropdown in the settings panel to automatically detect the font name, apply the filter and swap the font name with the placeholder value, and then change the font display property based on which item in the dropdown is selected.

[jazir555]

I even just ChatGPTed it right now, seems ultra straightforward. Can anyone tell me if this works? Can't check right now, not home.

https://pastebin.com/b1yhXkiz

If it does I'll submit a PR.

[jar53]

I believe this fixes it, but this forces all custom fonts to be font-display: swap. I tried your Pastebin & didn't seem to work on my website.

function update_font_display() {
return 'swap'; // Or any other value.
}
add_filter( 'elementor_pro/custom_fonts/font_display', 'update_font_display' );

[jazir555]

Gotcha, I'll try another run when I get home after dinner. This shouldn't be too hard to get working.