This CSS standardises your Responsive WordPress Fonts!

Подписаться 76 тыс.

Просмотров 2,6 тыс.

50% 1

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/

Хобби

Опубликовано:

29 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 42

@Gearyco Месяц назад

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.

@KillahManjaro Месяц назад

I always use percentages. makes life so much easer. Good advice for the slackers though.

@websquadron Месяц назад

@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 */

@websquadron 29 дней назад

@Gearyco Totally agree.

@KillahManjaro 28 дней назад

@@websquadron Thx

@Dudeske 27 дней назад

Best trick ever to don't have to setting fonts size each time ! I'll try this for sure. Thank you !

@QuaverloveStudio Месяц назад

Brilliant! Great template! Thanks, Imran.

@visualmodo 26 дней назад

Really good video!

@laithibrahim397 26 дней назад

As always, very useful and very detailed. Thanks Imran!

@edywerder 28 дней назад

Thanks for this video

@websquadron 28 дней назад

No problem

@jaseyarm 29 дней назад

Thanks Imran mate ✌

@felixrivera9298 Месяц назад

Very helpful, Imran!

@websquadron Месяц назад

Glad it was helpful!

@dan_kay Месяц назад

That saves so much time!

@websquadron 29 дней назад

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 */

@albezar 29 дней назад

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.

@websquadron 29 дней назад

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.

@albezar 29 дней назад

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.

@websquadron 29 дней назад

@@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 :)

@chrismyers3085 19 дней назад

@@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 :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LXMNqsCLjeY.html

@phkoon 6 дней назад

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?

@websquadron 6 дней назад

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: ru-vid.commZ1Klt72fp0?feature=shared

@phkoon 5 дней назад

@@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.

@samwillun 27 дней назад

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?

@websquadron 27 дней назад

If you’re adding to the custom font method then no need to use this snippet

@samwillun 27 дней назад

@@websquadron thank you so much🤠

@sakelis368 29 дней назад

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)'.

@websquadron 29 дней назад

Did you use the CSS pasted as is?

@OtisBurgos 13 дней назад

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

@websquadron 13 дней назад

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.

@OtisBurgos 12 дней назад

@@websquadron Interesting. What about buttons? Is there any way to make theme fluidly responsive as well?

@websquadron 12 дней назад

@@OtisBurgos Yes, add the clamp to the or use the necessary class name: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_ECtdddZVV8.htmlfeature=shared

@OtisBurgos 12 дней назад

@@websquadron Thanks bro! You're by far the best WP Elementor RU-vidr I've come across over the years. Actually useful content, easy to follow, and responds to comments! Bless you bro. You're doing wonderful.

@hila2932 6 дней назад

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.

@websquadron 6 дней назад

Did you just add the code, or have you got any other theme styles, or added into the style tab for widgets?

@hila2932 6 дней назад

@@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