Archived topic
Assign font-family to all elements
5 replies · Started by Antonio on November 11, 2021
Hello there!
I'd like to use Asap font sitewide.
Fact is: if I try to do that from Customize > Typography I have to specify the font for each tag (HTML, Body, etc.).
Is there a way to easily assign the main font to all elements?
Thank you
Hi there,
just set the Base element font-family.
And don't set any of of the other elements font-family, they will then inherit the base.
Ok thanks.
In the meanwhile, I followed this tutorial to install the font locally.
In this last case, what's the best way to add "font-display: swap" property to all text in the website?
I assume is something like:
html {
font-display: swap;
}
Thank you
You set the font-display: swap; property in your @font-face CSS - see here for example:
NOTE: Font Display Swap can lead to CLS issues, so i would recommend you test it - and if it causes CLS, then don't set that display to swap.
Ok great thanks,
I've read some posts on this forum about the font-display: swap issue.
On the other hand, while benchmarking with Page Speed Insight, I get the suggestion to add font-display: swap.
I've made a test using page speed insight: the final score is similar with or without swap.
So, for the moment I'll keep it.
Thank you
Glad to be of help!
