This CSS standardises your Responsive WordPress Fonts!
Vložit
- čas přidán 29. 06. 2024
- Get the CSS code from the FREE Fonts Pack: learn.websquadron.co.uk/#free...
And you can use the Free Tool to get your own Responsive Font Clamp() formulas: learn.websquadron.co.uk/tools
PS - Updated CSS Code for the Root HTML
/* Set the root font size to 100% to be better for Web Accessibility*/
html {font-size: 100%;}
/* If you prefer to set it to 10px for easier rem calculations */
html {font-size: 62.5%;} /* 1rem = 10px */
👉 Grab our $1 Business Packs: learn.websquadron.co.uk/#packs
👉 WordPress Hosting: be.elementor.com/visit/?bta=2...
👉 The Pro Page Builder: be.elementor.com/visit/?bta=2...
Need 1-2-1 Support: learn.websquadron.co.uk/#support
Join our Facebook Group: / websquadron
Get Code Snippets Pro: r.freemius.com/10565/3304295/ - Jak na to + styl
Best trick ever to don't have to setting fonts size each time ! I'll try this for sure.
Thank you !
As always, very useful and very detailed. Thanks Imran!
Really good video!
Just a quick note on accessibility: If you use px values in the root font size, it'll make all your typography inaccessible. The root needs to be a "%" value in order to respect browser preferences. Instead of 16px and 10px for the root, you can use 100% and 62.5%. Cheers.
I always use percentages. makes life so much easer.
Good advice for the slackers though.
@KillahManjaro Okey dokey.
/* Set the root font size to 100% to be better for Web Accessibility*/
html {font-size: 100%;}
/* If you prefer to set it to 10px for easier rem calculations */
html {font-size: 62.5%;} /* 1rem = 10px */
@Gearyco Totally agree.
@@websquadron Thx
Thanks for this video
No problem
Brilliant! Great template!
Thanks, Imran.
Thanks Imran mate ✌
Very helpful, Imran!
Glad it was helpful!
That saves so much time!
PS - I just updated the Root HTML:
/* Set the root font size to 100% to be better for Web Accessibility*/
html {font-size: 100%;}
/* If you prefer to set it to 10px for easier rem calculations */
html {font-size: 62.5%;} /* 1rem = 10px */
hi bro, I would like to ask if I add the woff2 font to the Elementor custom font library before I add this CSS code?
If you’re adding to the custom font method then no need to use this snippet
@@websquadron thank you so much🤠
Hello Imran. When I changed the font weight value to 100, nothing happened.
I'm testing on a new wordpress. Do you know how to solve it?
Have you added the weight anywhere else? Which Theme are you using?
@@websquadron I am using Hello Theme. I appreciate your help, how can I fix that? Thank
Does this mean that you prefer using the TAGS to change the font sizes and don't use the GLOBAL fonts styles anymore? I've set my fonts in the globals and never change the styles via the tags. Can you explain briefly why you don't use the the global style anymore if you don't? please get back to this question soon.
Thanks Imran.
I only use the Global Fonts for the Font Families.
I don't set the size or weight there (like ever-ever).
Rather than set the size in the Global Typography, adding CSS makes standardising easier and more efficient.
Especially if you use the CSS ID to set alternate sizes for Hero Banners, or other parts of the site.
thanks for rapid response. So you don't put any styles in the Global Fonts like I have currently. As an example I put a heading widget and use the tag H1 but then choose the preferred style that I have set up in the Global Fonts like "Title XL, Title L, Title M" etc.
@@albezar You can do that, but I prefer to leave my Sizing Styles as CSS because you could have a Title for all pages and then a separate Title for Hero. No right or wrong answer here :)
When I entered the ccs, an asterisc wrote the following before all h1, h2...: Expected («absolute-size» | «relative-sizes | «length | ‹percentage» | inherit) but found *clomp(2.5rem, 1.75rem + 3w , 4rem)'.
Did you use the CSS pasted as is?