The BEST Way to Setup Typography and Fonts in Elementor (2025) | 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!

[@ibukunadeyemi]

Amazing Job! looking forward to more explanatory videos like this

[@tobisalami]

More to come! Thanks for the comment!

[@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! 😊

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

[@InspirationBroadcast]

You nailed Tobi!

[@tobisalami]

Thank you so much!

[@HipCarbon]

well done Bro Tobs 🎉

[@tobisalami]

Thank you very much, Sunny! 😁

[@Aminewebdesign]

Amazing work brother 🎉👌

[@tobisalami]

Thanks a lot!

[@EmmyC-gy6cg]

This is nice, bro!

[@tobisalami]

Thank you soo 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

[@Anonymous-rg1dd]

Very interesting. Keep it up.

[@tobisalami]

Thanks a lot!

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

[@WatkinsLK]

Hi Tobi, thanks so much for sharing this nicely presented and valuable information. There is one other related topic that still has me quite puzzled, and was hoping that you could share your expertise in a further lesson. It's the topic of Page Breaks and Content Width. I currently use % to control the Content Width. I am also not sure about what Page Break sizes to use. Looking forward to your input. Thanks

[@tobisalami]

Thanks for the feedback on the video Keith! Content width should be set in px on large screen sizes for design preciseness. Different page breakpoints should have different content widths. And there are no hard and fast rules for this. The design is really what will determine this. On large screen sizes the width you set at that breakpoint will determine the max width. On smaller screen sizes, what will determine how far to the edge of the screen the content goes could be in %. The content can be aligned to the middle of the page and the max width set to 95% for example. That way, small devices have even spaces at the left and right edges. But larger screens can get too large to adopt this same strategy. It's better to define a fixed width in px for those and an extra padding for when the device size comes close to the size of the width you set! Do you understand the idea here?

[@kijan77]

Thanks Tobi!

[@tobisalami]

You're very welcome! 😊

[@ingarnt]

Thanks!

[@tobisalami]

Thank you for thanking me😊

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

[@raulgonzalez8510]

Excellent

[@tobisalami]

@@raulgonzalez8510 Thanks a lot!

[@Overcomersfortruth]

Wow Thanks for this

[@tobisalami]

You're welcome 😊

[@urbisunom]

Perfect , question only on the clamp 1920 is the layout of your elementor ?

[@MarkoKozlica]

Thanks for clarifying the clamp function for Elementor usage. Excellent video. I was wondering, how did you get the top border on the tab in your browser and these CLAMP and SCALE tags or whatever they are? Thx

[@MarkoKozlica]

Got it! Tab groups :D was not aware they function like this :D

[@tobisalami]

Glad you did!

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

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

[@tobiwebdev826]

Insight unlocked again. Please is there a video on responsive screen sizes?

[@tobisalami]

You're welcome. No, I don't have one at this time. But stay tuned.

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

[@MarkoKozlica]

I have a specific problem after applying the clamp for all of the heading sizes. They scale fluidly but only when the right side of the viewport "touches" the H1 content width, and it scales all the way to 53px of page width. What could be the problem? I have checked both the flexbox container and the headings are block elements with full width.

[@tobisalami]

I am not sure I understand the question, I'm sorry. Can you rephrase?

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

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

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

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

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

[@MarkoKozlica]

Another question concerning device widths below 500 (which you are setting as min viewport width) why don't you go below, usually I have seen people going for 320 or 380? 320 is the lowest viewport width in Chrome inspector responsive tool...

[@tobisalami]

Okay. This is according to the design requirement. 500 appeared to be a good compromise for me when I considered how small I want my fonts to get on an average small device. Setting it at 320px will mean that my font may be too big on an average mobile but too small on a desktop regardless of the font scale. Again, this should not be determined by any process, except the design requirements. It works this way for me, usually.

[@KillahManjaro]

NIce!!!

[@tobisalami]

Thanks a lot!

[@RobertStewart2209]

when i paste the clamp size it doesn't change, nothing happens

[@tobisalami]

Hi. Did you follow the steps as I explained?

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