How to Perfectly Set Up Typography & Fonts in Elementor

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

Просмотров 106 тыс.

50% 1

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: livingwithpixe...
Copy and paste my font sizes with clamp: livingwithpixe...
The font clamp website to create your own clamps: clamp.font-siz...
The font extension for Google Chrome I use to check sizes: chrome.google....
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixel...
Siteground for premium webhosting: livingwithpixel...
Elementor for no-code web-development: livingwithpixel...
Figma for Web Design: livingwithpixe...
All recommended software & discounts: livingwithpixe...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixe...
Figma Design Mastery Course: livingwithpixe...
Business Course: livingwithpixe...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixe...
Figma Design Starters Guide: livingwithpixe...
→ 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.

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

29 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@rinodeboer Год назад

@danstevens1974 Год назад

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!?

@rinodeboer Год назад

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.

@danstevens1974 Год назад

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

@Mkfinancialsca Год назад

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

@danstevens1974 Год назад

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

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

Thank you so much ... got quite frustrated about fonts and global/theme settings and now realized I have been doing it wrong or really inefficiently for so long 😁

@casmeijer9147 Год назад

Dankjewel Rino, dit is een van de meest hulpvolle video's van een lange tijd! Groetjes uit Zwolle

@PeterVatler-hv6nf 3 месяца назад

Thank you for this complete guide to Elementor's typography. But what line-height or letter-spacing should be used? Do you simply use the default values?

@tomwoo6633 Год назад

Again, how about the weight settings? Which weight shall I choose for each above font setting please?

@janstocke2231 Год назад

Hi Rino, awesome video thanks for sharing. Can you tell us what minimum and maximum viewport width you choose in the fontsize clamp generator to get those preffered values?

@TheJASDrummer Год назад

Did you ever figure it out. I can't get the generator to mimic his outputs. He should have quickly noted that as it is critical to the clamp values.

@janstocke2231 Год назад

@@TheJASDrummer Hi, no i could't figure it out yet and also couldn't mimic the exact outputs... :(

@TheJASDrummer Год назад

@@janstocke2231 Same. Bottom line the outputs do work well. I appreciate his worksheet and approach but without the viewport min/max settings I am left in the dark in how to adjust accordingly. For me I'll probably go with a 360 min and 1000 or 1120 max. I have seen it done a bunch of ways. I just depends on how much we want the max to grow as the screen gets wider and for me I have no interest in worrying about optimizing for a 42 inch wide screen. Good luck!!

@okaforchristopher5524 Год назад

Hello Rino! Thank you so much for this video. I have a question though. How were you able to calculate the line heights for each Titles. I saw you made use of ems for Line heights. Please how did you come up with that?

@gotta-date-with-hate Год назад

By no means am I am an expert but my own research I read line spacing at 130 to 150 percent the font size (i.e font size x150%= line height) is ideal for readability, but sometimes less or more is acceptable depending on your design...But for body text I find 130 to 150 works for me...

@MrHaythamfarid 7 месяцев назад

thanks for your very good tutorial, but i have a question about that you said that the google read H1, H2 etc, as the most important text on website while you didn't use it and use just a custom types of fonts

@nidarahman2305 Год назад

awesome video, made life ez , very well explained, thankyou so much, i lover your container video too.

@elCastilloContable Год назад

Excelente! esta parte de Elementor siempre ha sido difícil de descrifar! muchas gracias!

@doingthins Год назад

This is incredibly helpful! thanks Rino

@kylecoats8544 Год назад

Great video! Do you have a video on improving site speed using Elementor (like disabling Google fonts, etc). Would be a great video!

@antoniosdeligiorgis7557 Год назад

at 17:49 you have two fonts in POPP and one font in OPSA CON. So, you use a total of three fonts for an entire website? I ask because I want to know what is the best practice. Finally, what fonts did you use? Cause POPP and OPSA are no actual google fonts. Thanks in advance, and you did a great job explaining everything. If I can understand it, you did something really right.

@rinodeboer Год назад

Thank you 🙏🏻. Those names are just shorter versions of the real names: Poppins and Open Sans Condensed. I would say don’t go further than 2 fonts per website. 3 max.

@antoniosdeligiorgis7557 Год назад

@@rinodeboer thank you very much for your prompt response. Would you mind telling me which Poppins/Open Sans Condensed you used in this example?

@shaynamerkaba 6 месяцев назад

Rino this is so helpful!! Follow up question...how would you go about using mixed fonts in Elementor though? I'm seeing this trend a lot lately and have a client I'm using it for. So, an H1 headline that had two different fonts (and sizes) within it. Thanks!!

@rinodeboer 6 месяцев назад

Thank you! In that case I would just create an extra custom font in the Site settings and give it another font and sizes. Then you can decide whether you turn it into an H1 or H2 and so on.

@shaynamerkaba 6 месяцев назад

Thanks so much for your reply,@@rinodeboer - is there something I might be missing from your explanation? If you use the Elementor text editor, there are only H1-6 options in the dropdowns to choose from if you highlight certain words/text in the WYSISYG. Do you have to use style or span tags in the "text" html editor tab to change each work, and then make the whole section H1, H2, etc?

@shaynamerkaba 6 месяцев назад

FOLLOW UP - SOLVED - I created a custom class and just used span tags around the specific words. Any reason not to do it that way?@@rinodeboer

@rinodeboer 6 месяцев назад

I also sometimes use a Span tag, so there is nothing wrong with that. It just requires some little code.

@sylvanechoes Год назад

Hi thanks for the videos, can anyone help me figure out how to get all the different fonts files e.g woff, woff2, ttf etc for a single font style?

@valentindragomirescu3176 Год назад

Hey Rino, thanks for this video! What about variable fonts? Couldn't find anything related on google or Elementor documentation.

@sallypilkington1361 9 месяцев назад

Thanks for this video! I've used you clamp settings for a few elementor websites and they worked a treat, but they aren't working on a new website I'm setting up. It is using the new Elementor flex containers - are these incompatible with clamp maybe? I can't figure out why the clamp values aren't working. Thank you!

@rinodeboer 9 месяцев назад

Thank you. But I actually made the clamps in the container, so it should work perfectly. Not sure exactly what the issue is.

@rinodeboer 9 месяцев назад

Oh btw: Try to add a ; at the end. Maybe that will help.

@Chrainn 8 месяцев назад

@@rinodeboer Adding ; helped, thank you!

@lucyaccardo9110 Год назад

Lino if you can review aside from the size for REM, where you set the color and weight of those fonts (title 1, title 2, all the way down to body, body bold, body small, etc. Thanks!

@rinodeboer Год назад

The color is not something you can set up using the font features in Elementor. But you just have to setup some colors in the global colors. The weight can be set up via the Primary font, like I show in this video. Or for each Title1, Title2 etc individually. Up to you. But easier to put it in the Primary font.

@lucyaccardo9110 Год назад

@@rinodeboer Thank you! I followed this suggestion and it worked! Followed your entire video on that.

@kolawoledigital Год назад

Great tutorial as always @Rino May Grace and strength Please what are the minimum and maximum viewport width you used in the clamp generator?

@rinodeboer Год назад

Thank you! That is 360 for mobile and 1140 for desktop.

@mushtaqtechnologycom2824 Год назад

Good job RINO

@dominmax Год назад

This tutorial is very interesting. However I think much faster and safer (in some situations) would be to define also Site settings > Typography > h1, h2, h3 etc. And your custom style headings use only if needed (e.g. in SEO headings changing situations) - and what is beautiful - if you have some new style for a header you just edit the header style and click the plus sign to add the style as your new global style. Then you can just choose what header do you want to use. And what is also important - I do not think your custom styles would be working with posts edited with Gutenberg as pieces that shows in Elementor post template. So I agree with Leonardo Rubiu (who commented here) - his way is the best I think. But I very appreciate the clump method. By the way - every font looks different in the same "pixel size" - e.g. compare Raleway and Dongle ;)

@seemsas Год назад

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.

@rinodeboer Год назад

Ahh oke! You are so right. I forgot to mention that. Thank you for sharing.

@ClubMusicLive Год назад

Digital fascism, Germany always leading in directions no one needs or cares about.

@jensschmidt 6 месяцев назад

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.

@benjah221 6 месяцев назад

Remove google fonts plugin or hostlocally plugin

@OrigThriftyCarnivore 4 месяца назад

I'm so glad we don't have GDPR in the USA!

@erichepperlewp Год назад

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

@marcoolinho Год назад

Thank you for the video! Should I use REM for my line height and letter spacing also? REM or EM?

@StreamlineRoofingTx 8 месяцев назад

same question @LivingWithPixels

@andonisr 9 месяцев назад

Hey Rino, thank you for this nice video! I definitely understood the differences in the Global Fonts and Typography. One strange thing I discovered is that my 'clamp' code would not work, unless, I included the ';' semi-column at the end!!! Weird right?? 😌

@rinodeboer 9 месяцев назад

That's definitely weird, but good that you found that. And thank you for the compliment 🙏

@andonisr 9 месяцев назад

I'm now finding out that, although the code works live when I input it under the 'pencil' icon/option, (by live I mean at the current set up Elementor offers with examples so you can see it as you change it), when I scale down to mobile, I don't see the changes taking effect. I've disabled the Global fonts at Elementor's settings of course too. The fonts I changed with the clamp code just remain the same when seeing the page and the line height doesn't work no matter how many REM's I put. Perplexed..!!!@@rinodeboer

@misap123 6 месяцев назад

OH MY GOOOOOOOOOD, Thank you so much. I was trying to figure out what the issue was for the past hour :D

@jrothra 6 месяцев назад

Using the Heading element, you can select a global font and thus have an H4 at the size of an H1. However, what would be the impact of headings used within a text element (e.g., in a blog post)? In my tests, the H- sizes use whatever is default in the theme.

@rinodeboer 5 месяцев назад

Within the blogpost content box in Wordpress you are unfortunately limited by just using the styles from the H1-H6. Since you cannot separate the styling from the H tag in the WP content editor.

@TheJASDrummer Год назад

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

@MiguelGM Год назад

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.

@abdurrahmanomar4110 Год назад

indeed!

@rickdrummond8317 Год назад

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!

@juleshumboldt7680 Год назад

Hi, I am wondering about why you are setting max width 1920px 14:50 instead of 1120px (your prefered default), especially if a whole page is "boxed". Some stats say that even in 1st world countries there are 360px up to 9% on mobile devices. Here I am with you. So my conclusion would be a range from 360 to 1120. Can you give your considerations for a best practice viewport width range?

@90daysproficiency Год назад

Good question

@StreamlineRoofingTx 8 месяцев назад

why would the max size matter? As long as it scaled down to 360?

@juleshumboldt7680 8 месяцев назад

@@StreamlineRoofingTx clamp defines a range. So there have to be two limits. Min and Max. Look what happens to your site , if you set a ridiculous max like 5rem for 1920 or for 1200 for example.

@StreamlineRoofingTx 8 месяцев назад

@@juleshumboldt7680 by no means am i an expert, so i might just not understand, but i have mine set for 5rem at 1920, but i dont have my content boxed, its all full width, so maybe thats why its ok?

@verekarvakil6183 Год назад

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.

@rinodeboer Год назад

This comment made my day. Thank you so much 🙏🏼

@memudelight Год назад

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

@DevPalliSri Год назад

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.

@BrianNovak1 Год назад

@@DevPalliSri in the Elementor CSS settings :root { /*Set 1rem equal 10px*/ font-size: 62.5%;}

@RisignYT Год назад

Finally I understand the complaints of our SEO agencies ;-)

@knowledgeispower-d7y 11 месяцев назад

so when are you gonna change living with pixels to living with rem?

@chrz1247 Год назад

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.

@filippofernicola8101 Год назад

Mamma mia! What a great content Rino, thank you very much for your effort putting it together 🫶🏻

@paulwdm-v9l Год назад

Great content. I missed something, How do I set all the Heading fonts please, Title 1, Title 2, Title 3 and so on? ... thanks

@tinohannes Год назад

Thank you! What about line height?

@tim_neuneu Год назад

good question!

@franktielemans6624 Год назад

you can also use clamp on line-height or any CSS property that uses units. (padding, margin, letter-spacing, border-radius, etc...)

@tinohannes Год назад

@@franktielemans6624 Thank you very much, thats good to know! Do you have any values to start with? 👍🏼

@rinodeboer Год назад

Good point, I will remember to include that in my course then. But for a baseline for headings 120/130% and for body fonts 180-200%. Using % is nice because you can also do that in Figma and they scale according to the size of the font. But make sure to select the custom unit selector (the little pencil icon) to put in % values.

@daboz187 Год назад

Or you use for the line high multiple font size by 1.6. After That, round the Result to the nearest Full number. For some headers use 1.3 and for even larger sizes like 32px you can use 1.1 or even just 1.0

@morizanova8219 Год назад

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 .

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

Hello! Do you go deeper in font settings in your Elementor Pro course ?( which I have bought and just started) because I am still real confused after this lesson, maybe i will have to watch it again. For example, if i would change the base font for REM (16 px) in Elementor, how could I do that? And again, it wolud be possible to have your spreadsheet as you showed in the video? I mean the Excel Sheet. Thank you !

@JAK_EDITS. Год назад

Ngl as someone who has zero WP/dev knowledge, the rem part was utterly confusing- Am I correct in that with REM, if you were to adjust the size of the window the fonts will automatically adjust; rather than with PX where it stays the same size? That's largely what my ADHD brain took from that. Other than that, I might want to use PX because the site im building is a one-page scroller so I wouldn't mind going in and individually adjusting the sizes. That being said, even with it being very overwhelming, this is a fantastic video, so thank you! edit: you might consider adding chapter markers~ :)

@martinjudd8205 Год назад

Once again, a very helpful video. Thank you. Quick newbie question. Should I also use rem for line height and spacing? In particular, when using clamp? Thanks.

@rinodeboer Год назад

I recommend using % for line height since it scales when the font becomes bigger. I use clamp for fonts and padding, that’s it

@martinjudd8205 Год назад

@@rinodeboerthank you very helpful. When you say Clamp for Padding is that for all Positioning eg. Spacing of adjacent Containers, Widgets etc or just Padding associated with Text Widgets eg. Headings, CTA etc. Sorry for the dumb question:/

@rinodeboer Год назад

With padding I mean the padding top and bottom you use on all your background containers, so that it automatically becomes smaller on tablet and mobile. And sometimes I also use it on the inside of containers on all sides.

@LittleAmbientMachine 7 месяцев назад

Hey this is great info. The only question i have is how about using the page content element or text widget. In the text you are working with H1 , H2 etc.

@OrigThriftyCarnivore 4 месяца назад

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.

@Quintin-NLD 3 месяца назад

Hey guys, quick warning: Rino mentioned downloading fonts directly to improve site speed instead of using Google or other external sources. I did that and got hit with a licensing issue. Even with an Adobe subscription, they said my use wasn’t compliant and asked me to buy a pricey EUR500 license. So, always make sure you have proper licenses if you download fonts directly. Using Adobe Fonts or Google Fonts might be slower but keeps you safe with licensing. Stay compliant!

@ihriyadh Год назад

which Minimum and maximum viewport width did you choose to go with this template? Cuz I want to use different font sizes, suppose I want my H2 size for desktop - 38 PX which will be 32PX in mobile.

@ifwecouldvote 7 месяцев назад

Thanks, but a bit dissapointed that you don't really know how the global fonts work. My main problem is that they are overwiritng my typography settings. 'Primary' global font settings are overwriting my heading (H1,H2 etc.) settings in 'Typography'. So strange. I would've thought 'Global' simply meant default body font. It would make sense that Typography settings would take presedence, but apparently not, and there are no answers online.

@Artifexon 3 месяца назад

Great video... Two things, it would have been nice if you could have explained how to go about doing our own clamping a little more (like what values do I put in?). Also, I recommend 24px spacing for better readability and you should also explain EM for people to use to set their line height.

@peanutsaucery Год назад

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?

@sachtikus2 7 месяцев назад

Thanks fpr explanation Rino! 🎉 But I have a problem, I've uploaded my custom font, everything is working but when i open my web directly from Instagram app, it opens in IG browser and it cannot read the font. Haven't this error with wix before. Any advice? 🙏

@kristofgheyssens3941 6 месяцев назад

I set all 4 System Fonts to Default, including the Body and set the Body text under Typography. I've also just experimented with setting the headings sizes via clamp in the child theme instead of Typography, it gives a better overview, the Typography panel is too small.

@melgreendesigns 8 месяцев назад

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?

@MMFF88 5 месяцев назад

Hey! This video is great! I wish you would have showed us also how to use two of the different global typographies in the same h1 tag. I would like to create a design with two different sizes in the heading, however, they should be enclosed by the same h1 tag. I have been trying to figure it out, placing two different spans in my heading widget. Then I thought I could give those spans classes according to the global typographies we have set up. I haven't manage to do it, but I think I don't understand which classes to put. What are your thoughts? Could this be achieved?

@jarvindesign-svk Год назад

Hi Rino, What about to use clamp on html root? Example: html { font-size: clamp(1rem, 0.9773rem + 0.1136vw, 1.25rem) }. 16px mobile and 18px full HD monitor and 20px 4k monitor With this option you have responsive all items, fonts, spacing atc.. And one more thing. With container size clamp(16rem, 90vw, 70rem) you have responsive container on all devices without use paddings

@LoveSellf 2 месяца назад

Great educative content Rino, you have been a great inspiration! I still have a question though: you mentioned that "em" is a multiplier of all blocks it is nested within, not an innermost? Please clarify, would be grateful to you even more!

@denizhkilic 3 месяца назад

Thanks a lot Rino! the Line Height didnt explained in the beautiful tutorial. I guess we should use EM depending on the font we are working with. Can anyone confirm?

@mvpixel_ 4 месяца назад

I'm not sure if others are experiencing the same issues, but if I use the clamp values Rino suggests, it just doesn't work. Scaling the title 2 for example at a smaller screen size goes as small as 16px. It is all messed up. Also, the clamp values on your website do not match the values you are showing on the Excel sheet, how come? Is anyone else having the same issues?

@doloresrequena3788 5 месяцев назад

Great Video! Thank you. Our developers has made a desktop and mobile Wordpress (Elements) site version so after adding the Clamp to the desktop Global Font settings, it doesnt change the mobile version. Do I need to do the same settings to the mobile version as well?

@earlytoriseab 8 месяцев назад

Like it and I am updating my staging server. However... your instructions "only" cover when you use the heading elements. I use blog posts and the text editor, and there there I need to change the styling of the actual H1-H6, and not rely on custom fonts, right?

@leomakingads 8 месяцев назад

Do you know how to set the root size for 1 rem in elementor? I found out my website has 14px for mobile but I don't how to change it. I tried custom CSS in Site Settings, which did not work.

@MainstreamEnt Год назад

do you zero out your global H1-H6 settings when using costume settings

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

Amazing video! Thanks for the detailed explanation! I am really a huge fan of you!

@randymurray934 Год назад

Is Clamp support on all browsers?

@jagatheshpandian2186 Год назад

And I am from architect backround I like to shif my career to ux ui designer ....what's u r opinion...to makee more more more money brooooo ...what to do ...give some tippppp

@wysiwyg4770 10 месяцев назад

Thank you very much, but i have the phenomenon even having a Title 1 Font and selected for my heading. When i change the typography on H1 or H2, the size changes.

@YashChopda-dd2fe 3 месяца назад

The calculations are given properly but the line height for all the font is 1.2em and for body it is 2em respectively please update this on the page Rino

@phkoon 2 месяца назад

Hello there, Rino! Now it's been over than a year, would you change anything in this guide?

@AW-dr2jt 5 месяцев назад

Finally I've found a good explanation of how to define typography and what is what in Elementor. A very big thank you!

@stanceworks7995 5 месяцев назад

if I choose a heading block within a container - I cannot for some reason adjust the size under typography - I thought it was because of the font I was maybe choosing but it isnt that I as went with the default font now and it still does not change. The slider moves but there is no change on the text. I cleared my cache as well as someone suggested but that is not working

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

They are called Title tags, it help google bots crawl and understand your content better - you cant add more title tags it is basic text hierarchy standards

@martinargimon730 Год назад

Why does Elementor succeeds in ‘confusing’ us so much with these ‘fonts’ mess. They couldn’t have made it more complicated even if they tried hard ! Shame

@mikemaker3d 6 месяцев назад

Excellent explanation! But I have a question: How do you tell Google if it is an H1, H2, H3 heading...? because if you set the fonts from "global fonts", in the configuration you do not indicate at any time whether it is H1, H2... Thank you so much!

@ak47marx16 6 месяцев назад

When you drag a heading in elementor to page you can define the html tag under the content tab. 16:46

@theinnovativegroup6580 5 месяцев назад

Great Video! does something also need to be done to the line height as well? When I add the custom font types, for some reason my style sheet does not reflect the different sizes, however when using them on the site, the fonts are adjusted according with exception of the line height which remains way too large ?

@Timed-Automaton 6 месяцев назад

For a moment I thought you're Florin Pop. I was like since when Florin started wordpress

@brankolojanicic7590 10 месяцев назад

I have a question about uploading custom fonts. Is it possible that you cannot upload the OpenType font format? Is the only solution to use cloudconvert and convert it to one of the supported formats?

@rubendariogutierrezperilla235 6 месяцев назад

Hey Rino! I've been trying to setup but I didn't take the changes. I don't know what is wrong. How can I get it?

@schololo-blog8762 5 месяцев назад

useful guide. Can you please provide your sheet with font sizes, jumps?

@johnwhite3318 3 месяца назад

Thanks for sharing! Will " Clamp" do the heavy lifting and set all font sizes?

@NathalieHennequin 5 месяцев назад

Ouwwww yes, thanks for that one! Good stuff, devil is in the (type) details!

@fermultimedia Год назад

Feels like double work when also setting up the typography for blogs. There should be a better workflow for this...

@gotta-date-with-hate Год назад

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!

@daryljames6876 Год назад

Enjoyed the video a lot Rino. Does anyone have a suggestion on building this as a style sheet that can be used as a starting point on multiple site. I built a style sheet page and added Custom Fonts (in site settings) with all the clamp settings for each size. I exported as a template and also tried the new paste between sites but unfortunately the Custom Font (in site settings) is not imported Is there a way to import Custom Font (in site settings) from another site without plugins?

@wysiwyg4770 10 месяцев назад

Great Video. I have the mistake, that my H1 changes the font so do i need to make any adjustments to the H1 aswell?

@kasunwitharana2933 Год назад

What do you include in ypur monthly website maintenance package for our clients?

@lakinen_69 9 месяцев назад

Soo, If I install lets say Blocksy Theme, and there is an option to load custom font, should I also load the same font in Elementor as well?

@שיריזיגמן-ג2ח 11 месяцев назад

hello, I tried to put the function in the size section however, when I update the website all this font setting are deleted. Can you please advise?

@hedwigniemann1892 Год назад

Does anyone know if disabling the Google fonts actually make the site noticeably faster?

@derick_eppendahl 11 месяцев назад

Salut Rino! Quite surprisingly, the "clamp" function the way you use it works perfectly for me but with the " ; " at the end, and not at all without it... Maybe it comes from the fact that I am an old webdesigner... 😇🤫 Anyway, thanks again for your great videos, I am a fan!

@realmooryan 8 месяцев назад

Oh, this saved me. They must have changed something recently. Thank you!!!

@derrickbeaubearic4100 7 месяцев назад

Likewise!@@realmooryan

@shaynamerkaba 6 месяцев назад

OMG YES!! Thank you - saved me too. I had to watch this video 3 times to start to really wrap my head around it. Finally went to implement and was like what the heck! high fives to the comment section. :)

@saucydee1 Год назад

If you have set your Typography to different colors and sizes, is there an easy way to reset it?

@mondowp Год назад

Thanks for this great video Rino! So now you're going to change your brand name to Living With REM? 😆

@MiguelSeijas-f6z Год назад

Qué contenidos tan educativos tiene este chico! Son fabulosos! Muchas gracias por compartir tus valiosos conocimientos.

@joannewoodman Год назад

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.

@juliociamarra 2 месяца назад

Rino, as an Elementor Pro newbie, I greatly appreciate your videos because I want to setup my sites efficiently as possible up-front. I thought I was following along, but when I enter the Title 1, etc. and paste the clamp code, the font size never changes. Like this: I go to Global Fonts Under Site Settings, under Custom Fonts I add "Title 1, under Typography, Size I click on the Pencil and paste this code in: clamp(3rem, 2.5385rem + 2.0513vw, 4rem), but it doesn't work. However, when I just enter Rem, 3 then the font size changes. Any thoughts on what I'm missing thank you. Could this be a bug in Elementor/Pro? I can reproduce it.

@juliociamarra 24 дня назад

UPDATE: as I continue to learn Elementor/Wordpress, etc., I watched this video again and now I have it working as expected. THANK YOU, Rino!!! This approach makes the overall design and responsiveness so MUCH BETTER. Thanks again.

@maayanzilberberg2523 Год назад

What is your formula for calculation? sorry for my bad english

@weblabs7118 Год назад

Does anybody else feel like these fonts are a bit too big on mobile? They don't seem to scale quite well?

@88ikky 6 месяцев назад

Hi. Can you provide us with the line-heights as well?

@timhayes8174 Год назад

I tried adding the font REM but it just wouldn't work

@JohnNewtonSr 11 месяцев назад

I think you should add instructions for setting the line height for each title.

@MMFF88 5 месяцев назад

Fantastic video! Thank you so much :)

@Jim.Hummel Год назад

Question: I noted that my Custom Fonts in Site Settings are different. Mine list Box Title, Subtitle, Special Title, Accent Text Underline, Hero Headline, and so on. Did you manually add Title 1, Title 2, etc. via the Add Style button? I'm running Elementor Pro v3.14.1 - might the labeling have changed from when you created the video?

@rinodeboer Год назад

Another plugin probably added those styles to your website, because if you install a new website with Elementor then it will only give you: Primary, Secondary, Body & Accent. But you can just change them however you like, but just know that the first 4 ones are preconfigured in certain places already. But from number 5 you are free to do whatever you want. So yes, I did manually add them.