Fluid typography in Elementor

Such an awesome tutorial. Thank you for the work!

I don't see a place to add "Custom Fonts"

How to add a Variable Font in Elementor???

Just a note that in newer versions of Elementor, you can enter clamp() values for font sizes in the site settings, eliminating the need for the custom CSS code page.

I'm a bit confused about the "body" font, is that the same as the Paragraph in a widget? If I choose in a widget "global" font settings to "text" then it becomes the body font or / the Paragraph font?
And when you in the custom code set the body font in the clamp in the video is it like this then?: --e-global-typography-text-font-size: clamp(1rem, 0.9694rem + 0.1531vw, 1.1875rem);

Thank you so much for showing this! Especially how to find the emt code (elementor-kit-XX and --e-global…). Nevertheless I'd prefer to use the --e-global styles to define the h1 to h6 and not elementor-kit-12 h1 and so on, because in your solution the styles of my headlines were changing, when I changed the h-tags. If you use the --e-global styles instead, you can change the h-tags and the headlines won't change.
I also extended the css with @media queries to have a higher font-weight on small devices.

Oooh Boi....great work! I installed your add on this morning and instantly love it. The elementor guys should look closely. Awesome work and tutorials!

We missed your videos! This is the best video hands down on clamp for elementor by far.!~

this doesn't make any sense of setting up table, mobile font sizes if you can globally set with clamp for each heading? What am I missing here

Is it possible to applicate this method on my web when it's already done. My question is if it will affect all of my ready made templates etc.

Thank you.

almost thought "we" lost you mate great seeing you back now wondering if you would upload the typography page (the one that your saying your working on) would really like to see that one live on site ( and to work with) and see how your setting are overall on the page and in elementor maybe it can be used as ("my") new "elementor site settings standart"

Can you send me the site wide css file or add a download link?

Hey Oooh -- Is it necessary that I also set the responsive breakpoints in global typography settings, or can I just use "clamp" in the custom CSS file and get on with it?

Thanks for this video, it really made my day :)

Thank you for this! quick question, why did you choose 2280px as the maximum viewport width in the generator? does it make a huge difference if you change it to the actual website width ie. 1220px....

A VERY underrated channel! The amount of value / content quality packed here exceeds by far that of many overhyped channels put together.
Thank you A LOT for all your help and contribution mate. Highly appreciated!

Great to see you back!

This is just great! Thanks so much as always, awesome video!

Great to have you back!

can you please share the style code here for easy copy/paste?

and also, what do you do if you want to have a big title in the website? its not in the global font so you use h2,h3 etc?

thanks a lot!! 🙏🙏

Please make some videos on Woo Commerce also

Oh animator is gone in latest update?

ᑭᖇOᗰOᔕᗰ

Thank You!

Yes You're Back!!

Very interesting approach, i always struggle with font size as I'm not a designer.. Glad to see you back :D

You are the best teacher!

Amazing!! Great tutorial :)
But wouldn’t it be better to place the custom css inside the Elementor site settings custom css field?

This is so cool. Thank you

Nice, thanks! Is fluid typography compatible with all browsers?

Glad to have you back buddy :)

Really nice

THIIIIIIIIIIIIIIIIIIIIIIIS!! I actually posted about this on the Elementor group now has been answered by you!!

Welcome back, happy to you again I am experimenting oh animator to create awesome interactions but some of the are not working like clip path on scrolling, pls. Make one video on oh animator

Is your big Web-Elementor-course ready after 5 month? ;-))

Ive been using this for my fluid typography:

/* Fluid Typography Scaling */
/* This example begins from 320px | 20em to 30px @ 1920px */
@media (min-width: 20em) {
:root {
font-size: calc(0.9rem + ((1vw - .2em) / 1.37142857));
}
}
/* 1rem(16px) @ 48em(768px) increasing to 1.44rem(32px) @ 120em(1920px) */
@media (min-width: 48em) {
:root {
font-size: calc(0.943rem + ((1vw - 0.48rem) * 0.6944));
/* Where: * 1.3889 = 100 * font_Size_Difference / viewport_Width_Difference */
}
}

@media (min-width: 181em) {
:root {
font-size: 1.44em;
}
}

I set the body font to 1rem and away i go.

Thank you a lot for links and tips

thanks

Love to learn from you. Please make Video regularly

Nice, very nice

Welcome back!

You are a god. Thank you!
You are the reason i like Elementor ^^

Are you looking forward into adding a native Clamp System into Elementor's Typography Settings?

Awesome work and explanation as always! I saw Elementor added you to their official Add-Ons page finally. Great work.

Looking for more videos like this!

Always jazzed to see your awesome vids bro!

Welcome back !!!

long break