Hi @Bernadette ,

When browser loads a webpage then texts remains invisible for a few seconds and gets visible again when the font files are loaded, right. So by adding swap CSS property the browser would load a default font until the font files are loaded. After the webpage font file are fully loaded then the browser would "swap" the default fonts with that font.

It is useful to improve your website lighthouse score.

We can also add other css attributes instead of swap like auto, optional, fallback, etc.

Give this a quick read: 

Did you add that CSS rule to your site theme's CSS, @Jitesh? You can probably add that to any of the .less files, although it would probably make the most sense to see what CSS rules are already there for the body tag in main.less, then add it with those.

Hi @Adam,

I am on a free Weebly plan (I have a Weebly subdomain), so I could not see the CSS on main.less files as they are called by using the import command. Moreover, I can't edit those CSS files even if I find those out as they might be hosted on the main Weebly domain.

The other less files should be listed there - you may need to look through them to find which one has body styling in it. You're going to Theme > Edit HTML / CSS, right?

Yes @Adam, there are more folders (global.less and font.less), global one has the body tag and font folder has the @font-face tags, so on which folder should I place the font-display CSS property?

I would put it in the global less file; it's usually a good idea to keep everything together like that so you don't have to look through a bunch of different files later.

Ok, Thanks @Adam