- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Can we use font-display- Swap by editing main.less file in weebly editor?
I want to add a font-display attribute to all the texts on my Weebly site, as having a site on Weebly free plan I don't have enough flexibility, so can I use the font-display CSS feature by editing Weebly editor like this:
(I am a beginner in HTML/ CSS)
Weebly editor > Themes > edit HTML/CSS > main.less > then adding this CSS code:
body {
font-display: swap;
}
Thank you for the support.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
I'm not super familiar with editing the code, @Jitesh. What are you trying to do with the font? What is the purpose of the "swap"?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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:
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report