How to Perfectly Set Up Typography & Fonts in Elementor
ฝัง
- เผยแพร่เมื่อ 25 ก.พ. 2023
- Since many people struggle with typography and custom fonts inside of Elementor I thought I would make a guide, because it can be quite confusing. I'm also tackling the px, rem, em and vw in this video and I'm giving you a guide on how to use fonts that scale automatically. I hope you like it!
My Elementor Pro Course is out! Check it out: livingwithpixels.com/elemento...
Copy and paste my font sizes with clamp: livingwithpixels.com/resource...
The font clamp website to create your own clamps: clamp.font-size.app/
The font extension for Google Chrome I use to check sizes: chrome.google.com/webstore/de...
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/software/
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ My Social Media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it. - แนวปฏิบัติและการใช้ชีวิต
Since many people struggle with typography and custom fonts inside of Elementor I thought I would make a guide, because it can be quite confusing. I'm also tackling the px, rem, em and vw in this video and I'm giving you a guide on how to use fonts that scale automatically. I hope you like it!
Thanks Rino - another great tutorial! It works great for me until I look on a mobile phone - my Title 1 ends up looking way too small for some reason!?
Looking at the comments I now see that I wasn't clear about using the H1-H6 for blogposts. So don't get me wrong: I use the H1-H6 for blogposts to give it structure, and you can even change their sizes in the Typography section in the Site Settings, and you should also use them to give normal pages structure. But I just don't use them for styling purposed on non blogpost pages.
@@rinodeboer Hi Rino. Thanks for your reply. I figured out what was happing. Some default settings in Elementor were already set for tablet and mobile so once I cleared those settings out everything is perfect! Thanks again. Dan.
@@danstevens1974 hi daniel, can you please tell what those settings were? I am using rino's font sized, but it looks way to big on mobile and tablet mode. It was perfect before but suddenly it changed to something comepletly different
@@manikbrinda6720 Hi Manik - yes i noticed some of the headings were too big on mobile also. You can always change the clamp code to your preference. A bit of trial and error involved! cheers.
Finally I've found a good explanation of how to define typography and what is what in Elementor. A very big thank you!
03:00 - Installing Custom Fonts
07:24 - Determining what values to use
11:00 - Rino's Spreadsheet
13:00 - #CSSClamp saves the day!
15:15 - How to set up the font sizes in Elemntor
Your videos are an exceptional resource for anyone looking to improve their skills with Elementor. Your clear and concise explanations make even the most complex concepts easy to understand, and your teaching style keeps me engaged throughout each video.
indeed!
Your video's are really fantastic! You do a great job of explaining things easy, not moving to fast and allowing newbies to follow along without being inundated with technical terms!
I hope this message finds you well. I wanted to take a moment to express my gratitude for the incredible help you provided me through your video. Your content was incredibly informative and well-structured, and it helped me to understand how should I setup font style and size on my website, in a way that I had not been able to before. Your passion and expertise truly shone through in your video, and I could tell that you put a great deal of time and effort into creating it. I am so grateful to have stumbled upon your video, and I wanted to let you know how much it has helped me. Your generosity in sharing your knowledge and expertise with the world is truly inspiring, and it has made a real difference in my life. Thank you once again for your hard work, dedication, and generosity. I wish you all the best, and I look forward to seeing more of your amazing content in the future.
This comment made my day. Thank you so much 🙏🏼
Too easy... but only because you made it so. Excellent tutorial and well structured so that we understand what we are doing while availing ourselves of the shortcuts you so generously provide. Thank you so much!
About the 3 years: I feel you,
after a year of using the manual way of defining fonts and duplicating it, with px as the default, last week I invested a whole day on learning how to use the GS in combination with REM the proper way. One day later your video went online. Would have saved a lot of time. On the other hand I'm happy about the free confirmation... :']
PS: The Clamp Generator is genius.
I love the attention to nuances and problems, and the best way to navigate them. Great material!
As always, your video was fantastic and incredibly helpful. I've probably built 30 corporate websites using Elementor over the past few years, and I still just bang away at all the font settings, and never seem to feel like I totally have a handle on what I'm doing. Thank you for clearing this up, it's terrific.
This was so very helpful, thank you Rino! I've never really understood REM but this explained it clearly in a way I will remember and continue to understand, and also helped me tweak how I set up my elementor fonts in the future! Appreciate your tutorials.
Rino, you are amazing. You always manage to pack a ton of valuable info in a short amount of time and still be easy to follow along. Your paid course was just like that, too.
Thank you for the compliment 🙏🏻
Rino - simply brilliant. I am just a user with 20 websites (not a developer) but I use Elementor and am always trying to find how to use it better. Your videos provide original insights and your explanations are unique. Great value - sign me up to your course!
Dankjewel Rino, dit is een van de meest hulpvolle video's van een lange tijd! Groetjes uit Zwolle
Another fantastic tutorial from Rino. Thank you, Rino for making our life easier!👏
Thanks so much for for such a in-depth guide. I finally found someone who explaned REM vs EM in Elementor 🎉
Thanks alot for this Rino. This is very helpful to my web design. I appreciate all the videos you make.
Great video thank you, I have been looking for this solution and have tried making changes to font sizes in the range available. I already use custom fonts and disable the Google fonts options in Elementor and now you have clarified the use of REM and the Primary and Secondary options 🙂
Thanks Rino for this very useful tutorial. Thanks for sharing your knowledge with us!
FR - Très fort pour rendre nos procédures d'intégration plus efficaces ! Merci Rino
THIS IS AMAZING! I struggled with fonts setup like this dog from "i don't know what i'm doing" meme. With no hope left, I watched this video and it changed everything! amazing, thanks!
Finally I understand the complaints of our SEO agencies ;-)
Mamma mia! What a great content Rino, thank you very much for your effort putting it together 🫶🏻
Thank you very much Rino. Once again a very valuable video from you. Thank you for sharing your insights with the community. I have also dealt with this topic extensively. Your video shows me that I had the same thoughts as you and I already am well positioned with my projects. I have already worked with REM Font Sizes and created a scaling table (but I like yours even better, especially the new feature that now covers all responsive views!) I also didn't know what I needed the typography section for (currently I only set the link colour there).
Concerning the global font uploads, there is another important reason besides pagespeed to host the fonts yourself. As a web designer in Germany, I always have to pay attention to the DSGVO, which is very strict here. A few months ago, there was a veritable wave of warnings from pseudo-lawyers who found a loophole with externally hosted Google Fonts. The use of the US Google servers was interpreted as a data protection violation. Maybe this is also an issue in other countries? Finally, thanks again for your efforts and keep up the good work! I look forward to every new video from you! Many greetings from the Black Forest, Jennifer
Thanks a lot Rino! How possible your video appeared just when I needed it. Very well explained. Good job. Keep it up :-)
You're really good at this. Very useful. Thank you so much.
Great video Rino! Thanks for sharing your font size cheat sheet, it's a huge time saver and also keeps font sizes consistent and legible on all devices.
This is super helpful, thank you Rino! Love your videos
You helped a lot, mate! I'm new to wordpress+elementor and this was an awesome content.
Great video, thank you for the thorough explanation!
Great tutorial! Just what I was looking for. Thanks!
Qué contenidos tan educativos tiene este chico! Son fabulosos! Muchas gracias por compartir tus valiosos conocimientos.
Really appreciate this video, especially the "clamp" solution to scaling. I knew the importance of using h tags properly (I was taught to treat them as you would when writing an outline because that's how search engines look at them), so your system of setting their appearance, and not locking in their styling, makes much more sense. The first time I played with getting the global settings setup it turned into a convoluted mess. As I'm just started to rebuild a site from the ground up; this information is going to help me a lot. Thank you.
Amazing technique. This is just what I was looking for. Thanks, mate.
That was a great video. As you said, it is SO confusing and you have made it much clearer for me. Thank you!
Glad it was helpful!
This is an awesome resource. Thanks for the hard work!
That is amazing tutorial video and really makes me understand fonts and typography.
Great, Greater, Living with pixels! Thank you for support
Thank you so much for clear up this font hassle in elementor!
I would love to have Rino in Elementor UI team . The way he explaining and give arguments with calm is something you want to have in your team .
WHAT AN AMAZING VIDEO!!! THANK YOU. You saved me so much time.
Excellent. Your videos are great. Keep up the great work!
Well done! it was exactly what I've searched for...
Hey Rino, another valuable video from you. Thanks a lot. I also work with Elementor for most of my clients (98%?) and have been messing around with fonts, especially in making them responsive. This saves a lot of work and improves consistency over the whole website. Bedankt!
Wow, this makes so much sense! Gonna try this with my next build!
Well, that was very informative! I'm definitely going to use this. Thanks! Super video!
Amazing. Thank you so much. This was exactly what I needed.
Thanks for all the links you've provided
Rino, please don't stop making videos! You're the best in YT with Elementor! Keep up w/ the great work! Best regards from Brazil!
This is incredibly helpful! thanks Rino
Thanks Rino - I love this training - I also like the way you get excited and passionate when you realise your way is so dam good. :-)
Haha yea, I really do get excited about these nerdy little things.
Hey Rino ,
Another clear and concise explanation.
This issue has been bugging me ever since I started using Elementor a couple of years ago. I knew there had to be a better way but I've been too busy (Lazy?) to look for one.
Now I'm pleased I didn't as you've explained not only the how to but also the why.
Thank you for sharing your hard work & knowledge so readily. I'm really looking forward to you new Elementor Pro course.
Thank you so much for your comment as well 👌🏼
Thank you so much Rino, your content is really good and inspiring, I am so grateful. God bless :)
This is amazingly helpful!
This was so helpful - thank you!
Fantastic video! Thank you so much :)
This has been my world, so thank you for video.
Last week I lost all my custom uploaded fonts when we pushed two sites live. Colors and some H tag settings too 🙃
This video is by far the best tutorial for setting up the fonts. You come up with the best systems. Can you do one for global colors?
Fantastic video! Great job- very helpful
Thank you very much, this helps a lot
awesome video, made life ez , very well explained, thankyou so much, i lover your container video too.
Rino, I was just racking my brains to find the right way to manage typography and suddenly you upload a video about. It's too much of a coincidence lol
Thanks for the great content you publish. 😊👍🏽
I feel you! Haha, what a coincidence! Thank you 🙏🏻
Excelente! esta parte de Elementor siempre ha sido difícil de descrifar! muchas gracias!
This a gold tutorial, thanks a lot!!
Very helpful. Thanks.
Great tutorial. Thank you very much
We use also clamp on body font. And for larger o smaller body text you can also use em as it is more appropieted
Very nice and helpful video
Great video, thanks for the great tips!
Informative as Alwasys! Thank you
Rino,Thanks for sharing all information's,
High-quality content! 😍
Thx for this briliant guide!
Just the case i was wondering with the rem values. Thanks. Waiting the course to launch.
Hey Rino, you are a life saver, tnx
Rino, I love you! (Don't tell my wife). Finally I understand how that works. Thank you so much!!!
Couldnt agree more.. this is exactly what I do with my elementor font system when I use Hello theme 😄. Alternatively you can use theme that have font system like GeneratePress, Neve, Kadence or Astra than disable the default font/color, I found this easier to setup than using default elementor system. Btw, great content as always Rino!!!
This is yet another wonderful presentation Rino. My only question is what were the Min/Max Viewport settings you used in the Clamp Generator? When I use 360 & 1920 I do not seem to come up with the same values. Thank you in advanced :)
Awesome. Thanks so much Rino.
That was super helpful Rino! Thank you. :)
Glad it was helpful!
Not the easiest to follow but really important and well explained. Thank you as always
Thanks for being honest. I’ve had the exact same feeling when I was reviewing this video. I hope it will get easier in the future.
👍excellent explanation, thank you so much!
Loading fonts from Google also causes an issue with GDPR compliance! Userdata are sent to Google before the user has the ability to consent or deny. For this reason you should prevent loading from Google and host the fonts on your server. At least in Germany there are many dissuations which want penalty payments from site owners.
Ahh oke! You are so right. I forgot to mention that. Thank you for sharing.
Digital fascism, Germany always leading in directions no one needs or cares about.
Exactly! Which is why I use the Custom font option exclusively, even if it means that I have to download the Google Font from Google and manually upload it to my site. It's safer, GDPR (or DSGVO) compliant and faster.
Remove google fonts plugin or hostlocally plugin
I'm so glad we don't have GDPR in the USA!
Great work! Thank you for this. Greetings from Sweden :)
Thanks for the help. God bless!
This is solid gold.
Very interesting approach. Personally I go with REM = 18px.
Also, in some countries (like USA) you have to consider ADA Accessibility Standards, especially for font-size and color contrast.
Did is awesome. I'm definately enrolling in your course
Awesome right? And oh that's nice to hear man! Thank you for your trust in me
Great video again 🤩
Hi Rino, you always had great content and I always find them useful. Quick question though, how do you make a website built with Elementor load faster? Do you have a method or plugins you recommend to optimize Elementor? Thank you.
Fantastic content as always 👌💪👍
Thank you 🙌
Thankyou you saved my life 😂❤
This is so so good.
Great content thanx for sharing 👍
Excellent video, Rino! This feature is very interesting. What I was in doubt was how to change the line height. I thought it was too big, especially on a cell phone. How do I change it?
Congratulations for the channel, it is amazing!
So good one again !! Thank you for your deep approach. I didn't figure out difference between EM et REM no it's clear ! Thank you . I would like to know how do you handle font size from Adobe XD to Elementor. That's my biggest struggle! :)
Hi Rino, thanks for the great helpful video!!! What numbers did you enter in the clamp generator? Min viewport and max viewport? Thanks a lot
Hey Rino, we can even change the default html font size to 62.5% so that the base font size becomes 10px ( 1rem). Body font becomes 1.6rem. so its easier to do calculations as now just have to divide by 10 to get the rem value from px. Eg 52 px becomes 5.2rem
I thought he will be explaining in this video how to do you mentioned point.
But disappointed.
May be in custom Css of the Theme, we can keep html{font-size:62.5%} and would work all over website.
@@DevPalliSri in the Elementor CSS settings :root { /*Set 1rem equal 10px*/ font-size: 62.5%;}
Great video, thanks! Do you set up the global font settings from scratch for each new website? Or do you pre-install it as a kit or template?
Fantastic Videos. In fact, I've just been binging your content. Very grateful. One question, just to make sure I'm understanding: I should not use the typography setting at all? But instead I should set up the Heading (H1-H6) sizes as custom fonts in the Global Fonts section. What should the Typography headings be set on? Default?
This is a great tool Rino! I have just put it to good use and want to make one comment, the semi-colon after the closing parenthesis is necessary when using the CSS clamp in Elementor global fonts. Thanks again for making my life easier!