This CSS standardises your Responsive WordPress Fonts!
Вставка
- Опубліковано 6 вер 2024
- Get the CSS code from the FREE Fonts Pack: learn.websquad...
And you can use the Free Tool to get your own Responsive Font Clamp() formulas: learn.websquad...
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.websquad...
👉 WordPress Hosting: be.elementor.c...
👉 The Pro Page Builder: be.elementor.c...
Need 1-2-1 Support: learn.websquad...
Join our Facebook Group: / websquadron
Get Code Snippets Pro: r.freemius.com...
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
Best trick ever to don't have to setting fonts size each time ! I'll try this for sure.
Thank you !
Brilliant! Great template!
Thanks, Imran.
As always, very useful and very detailed. Thanks Imran!
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 :)
@@websquadron Love these latest clamp videos, Imran. Been super helpful as I start up a new project (first site I've made after a year hiatus). First time using clamp and you make it easy; however, to what @albezar mentioned about using HTML TAGS to determine the class, what do you think about Kyle over at The Admin Bar's suggestion to use "looks-like" CSS classes so you're not messing with tag hierarchy, SEO, etc.? He talks about it at 6:10 in this vid. Curious to know your thoughts :) ua-cam.com/video/LXMNqsCLjeY/v-deo.html
Very helpful, Imran!
Glad it was helpful!
Thanks Imran mate ✌
Thanks! I was inclined to use Global Fonts instead, and leave the HTML tags unset (under the Typography settings), that way I could create more than one style without adding classes nor CSS. But you made me dug a bit, and I just realized it's probably the industry's standard to do what you suggested, due to how common it's also been suggested...
I have only two questions now:
(if you have any content on this, just let me know and I'll look for it)
I've read that you use only Global Fonts to set font families alone, but is there any other setting you unset or leave untouched regarding Site Settings?
Also, do you check "Unregister Hello style.css" and "Unregister Hello style.css" under the Hello Theme settings?
I don't touch the Hello.style, but to help the CSS - then ensure the checkboxes in EL Settings ARE ticked to disable default Colours and Fonts.
i only set the families for the Global Fonts.
See this: ua-cam.com/users/livemZ1Klt72fp0?feature=shared
@@websquadron Damn, I used to leave all of the Hello theme settings checked, including "Unregister Hello style.css" and "Unregister Hello style.css", as for the Elementor settings to disable the default Colours and Fonts, I used to leave them unchecked, since I thought we'd want the other way around, but now you just made me realize we're using the seamlessly integrated Hello theme. So, THANK YOU.
And also thanks for the video suggestion, I'm watching it.
Really good video!
Thanks for this video
No problem
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 */
I need help. I pasted the code you wrote as is. But he changed my font color and I can't choose another color. How do you get out of it? Other than that, your explanations are excellent - thank you very much.
Did you just add the code, or have you got any other theme styles, or added into the style tab for widgets?
@@websquadron I added the code to the whole site of course, but I already have text on the site both as titles and as text in paragraphs
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🤠
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?
What is the Body text tag? I am trying to recreate what you have on elementor (Made for Display texts from H1 all the way to Text) but I don't know what is the "b" widget. I have H1-H6 as Heading widgets and specified HTML tags, (p) is Text Editor, but I don't know what b is.
Thanks
If you set the body font size to 16px, any text element on your site that doesn't have a specific size defined will display at 16px. This includes text within divs, spans, lists, and any other generic text containers.
So when you do set the 'p' to be 18px, then text inside of text editor will be 18px but anything else will be 18px.
@@websquadron Interesting. What about buttons? Is there any way to make theme fluidly responsive as well?
@@OtisBurgos Yes, add the clamp to the or use the necessary class name: ua-cam.com/video/_ECtdddZVV8/v-deo.htmlfeature=shared
@@websquadron Thanks bro! You're by far the best WP Elementor UA-camr I've come across over the years. Actually useful content, easy to follow, and responds to comments! Bless you bro. You're doing wonderful.
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
It could be that your selected font doesn’t have the 100 weight option. What font are you using?