The BEST Way to Setup Typography and Fonts in Elementor (2024) | Elementor Tutorial

[@AidanJoyce]

hey tobi, numerous people have attempted to cover this and have; as you said either got it wrong or made a bal..... of explaining it. youve done a super job, this is bang on the button. I do hope elementor users get to see this as its absolutely a best practice for development responsive websites. Congrats. Liked and subscribed. Suggestion, to pair with this if you could get time to cover the best practice relating to loading fonts (i.e. disabling google fonts and properly loading your own) covering how to do it properly and benefits of woff2 over ttf etc etc. good luck and thanks again.

[@tobisalami]

Hey AidenJoyce! Thanks for the review! I appreciate that a lot. The way to get Elementor users to see it is to share it with them! That would be appreciated too! Excellent suggestion on a follow-up video! I'll put that down and consider it for a future video.

[@TimOlukayodeAjayi]

Egbon Tobi, you did an amazing job explaining this topic. Obviously, I have been doing this the wrong way all these years. Your explanation is very precise and clear. Thank you so much for making this video. I am a fan already.

[@tobisalami]

Thanks a ton! I appreciate the comment!

[@LMS_Design]

Thanks Tobi. I've been doing it all wrong for the past 3 years 🤦Thanks for explaining - much appreciated!

[@tobisalami]

Thank you for thanking me! I appreciate that!

[@seaonau]

Hi Toby, this is a great video. I have watched a lot of videos on this topic and yours explains it the best. Thanks and well done!

[@tobisalami]

@@seaonau thank you for watching. I appreciate that!

[@ori20031975]

Toby, you explain very well. It is mandatory for anyone involved in the field to start working correctly!!

[@tobisalami]

Thank you very much! I appreciate the feedback! 😊

[@ibukunadeyemi]

Amazing Job! looking forward to more explanatory videos like this

[@tobisalami]

More to come! Thanks for the comment!

[@markusfrehner7631]

Thanks Tobi, just found your channel, great and helpful tutorial. I might use Imran Siddiqs clamp calculator instead of the one u suggest, since that one calculates all of the sizes in one table. your explanation is awesome, I will definitely keep following you.

[@tobisalami]

I appreciate that very much.

[@Aminewebdesign]

Amazing work brother 🎉👌

[@tobisalami]

Thanks a lot!

[@matjaro]

Thank you for explaining it clearly ! Can you clarify what is the point of using those two site when the font size clamp code is universal to all site? Dont we have a standard site applicable for most site? Could you post the list of clamp code that you recommend using?

[@tobisalami]

The clamp function to be used will depend on the brand guide you follow to build your website. For example, you would use the major third (1.250) if your h1 is about 3.815 rem for your desktop size. You need the first site (typescale.com) to generate the scale, while the other site (clamp.font-size.app) is to help you actually generate the clamp function using the scale! You may review the video and then let me know if something is still unclear.

[@InspirationBroadcast]

You nailed Tobi!

[@tobisalami]

Thank you so much!

[@054ino]

Hey Tobi, you just pulled a superhero move and saved us all from the clutches of typography confusion! 🦸‍♂️ I've seen other KZbin tutorials trying to unravel the Elementor font mystery, but I almost instantly got lost in the maze or they turned into a snooze-fest. But you? You made it look as easy as assembling a sandwich. This is the ultimate guide every Elementor user didn't know they desperately needed. Hats off to you for making our design lives infinitely better! Liked, subscribed, and sending virtual high-fives. 🙌

[@tobisalami]

Comments like these are why I'm not going to stop releasing valuable content. Thank you! I appreciate the review a lot

[@HipCarbon]

well done Bro Tobs 🎉

[@tobisalami]

Thank you very much, Sunny! 😁

[@keithlogan3212]

Great video Tobi! What happens about body text? Do you use the P rem size in Typescale? Thanks

[@tobisalami]

Yes. Usually. I just leave it at 1rem. You can also decide to make the p 1.2rem on desktop and 1rem on mobile to generate your clamp function. But this will depend entirely on your design needs or preference.

[@ingarnt]

Thanks!

[@tobisalami]

Thank you for thanking me😊

[@kijan77]

Thanks Tobi!

[@tobisalami]

You're very welcome! 😊

[@Overcomersfortruth]

Wow Thanks for this

[@tobisalami]

You're welcome 😊

[@cpalma]

Great job! I've been doing a similar setup but was doing a combination of Site Headings and Global Headings. It never occurred to me to set the Site Heading as the Global heading, which eliminates that extra step. Do you have any thoughts on setting up a global system for padding in Elementor?

[@tobisalami]

Thank you for the feedback. You could use a framework like Core Framework to do that.

[@Anonymous-rg1dd]

Very interesting. Keep it up.

[@tobisalami]

Thanks a lot!

[@EmmyC-gy6cg]

This is nice, bro!

[@tobisalami]

Thank you soo much!😊

[@Mailpim]

Hi Tobi, Great job! I did exactly what you have showed but my font size isn't changing. So from H1 to H6, they are all the same size, even in the preview they are all the same size. What am I doing wrong?

[@tobisalami]

HI. Thanks! The preview usually has issues displaying things correctly. Kindly look at it on the Elementor Edit page and on the frontend. Also, ensure that "Disable Default Fonts" and "Disable Default Colors" in Elementor Settings are unchecked, so that the Elementor Style kicks in!

[@derick_eppendahl]

Thanks Tobi, and how do you handle line spacing ?

[@derick_eppendahl]

With clamps too... Gt it ! :)

[@tobisalami]

You are welcome. I use the same clamp function that I use for the font-size for the line height too. The result is a height that expands and reduces depending on the screensize. It works well, mostly.

[@derick_eppendahl]

@@tobisalami Sure, it just takes more time as you have to check manually...

[@tobisalami]

True. But it's way better than the alternative no-code solutions.

[@omarsharif8739]

Impresive ! can you share any trick to use this as global setting on all website like how to import this setting and use it again and again...thanks!

[@tobisalami]

Thanks. And yes! You can export the Global settings of elementor using the Elementor kit. And it'll come along with all the global settings set up here!

[@raulgonzalez8510]

Excellent

[@tobisalami]

@@raulgonzalez8510 Thanks a lot!

[@daveden2]

Really good explanation. 👏 👏 I tend to add Core Framework into the mix as well.

[@tobisalami]

Thank you so much Dave! I appreciate the comment. And yeah, Core Framework is an excellent tool!

[@daveden2]

@@tobisalami I can't wait to see more of your videos on Elementor, Bricks, Crocoblock, and others

[@tobisalami]

Oh, you will, Dave! Most of the videos I'll be uploading will be related to Bricks and JetEngine. For the first video, I just decided to go for a low hanging fruit! 😊 I appreciate the encouragement a lot!

[@AidanJoyce]

@@tobisalami bricks and jet engine - excellent call, but do keep the elementor stuff going while people still transition, steeper learning curve in bricks for non developers.

[@tobisalami]

I agree that we still need content around Elementor, especially as people transition to other professional builders. I have been using Elementor for a number of years, and now use Bricks more, so I can understand the issues with transitioning to a new builder. I intend to create a separate playlist of my videos in the future where I will detail all the similarities between Elementor and Bricks. The aim would be to get people to see that there are more bridges than walls. In the meantime, however, most non-builder-focused videos showing how to get things done in the front-end will have both an Elementor and a Bricks side to them. I adopt this same strategy when publishing articles on tobisalami.com. Thanks for the feedback!

[@mar_kus]

Hi Tobi, do you know if it is actually still necessary to add the XXL Preset to the H1 Typography settings like shown in 10:35? I am doing it exactly like you, but I was skipping that part. My thinking - the less settings possibly impact the font-size the better. If both, H-tag and preset is defining the font-size, one must always overule the other

[@tobisalami]

Hi. Kindly see the video again. The H1 to H6 tags all have their styles BASED on those global fonts I created. They should not have independent styles. Let me know if you understand it after reviewing it. Watch closely the creation of my H2 style and see how I connected both.

[@mar_kus]

One of the most confusing settings in Elementor is "Disable Default Fonts" and "Disable Default Colors". I always forget what the default setting is. I think it impacts what you describe in the video. "Checking this box will disable Elementor's Default Fonts, and make Elementor inherit the fonts from your theme." Do you have it checked or unchecked?

[@tobisalami]

You should have it unchecked. This would only be used when a person intends to use Global Styles set in the theme, and not within Elementor!

[@campusconnecttv170]

Is there a way to create image quiz with element forms or jetformbuilder

[@tobisalami]

Hi. There's a tutorial about this on the Crocoblock channel.

[@KillahManjaro]

NIce!!!

[@gideoneverest3311]

❤️

[@tobisalami]

Thanks a lot for the comment!

[@mrnordjr]

That way it is very hard to maintain

[@tobisalami]

The way I showed? Or the way people usually do it?

[@mrnordjr]

@@tobisalami the way you showed it

[@tobisalami]

Do you have a better way?

[@mrnordjr]

@@tobisalami Classes...

[@tobisalami]

@@mrnordjr I'm not sure I understand you. CSS classes are great. But these are technically variables that are being created and should be used along with classes even if they have to. It'll be a different setup method in Bricks. But Elementor is not a class-first builder.