Font-display: swap

Hi Zed

I’m trying to improve my site’s Core Web Vitals and so I’m following the Google PageSpeed Insights’ recommendations. There’s this element that I just can’t seem to fix via CSS, one that seems to be causing CLS. It’s this one: “Make sure the text remains visible while uploading the web source. Use the CSS function font-display for users to see the text while uploading the web source”. It seems to involve /fonts/socials.woff + /fonts/blocks.woff + /fonts/elusive.woff (Fluida theme).

This is an example of the CSS input I’ve been trying to add so far:

@font-face {
font-family: Social;
src: url(/path/to/fonts/social.woff) format(‘woff’);
font-display: swap;
}

Could you please have a look and let me know what I’m missing? Or is there a better way to handle this?

Website: cosmopoliclan.com