Wow! I have been making web pages for years and the truth is that I never paid enough attention to the fonts, excellent video brother, thank you very much for the tips!
@LytboxStudio Жыл бұрын
Thanks @Menduksay!
@ronrichardson175 Жыл бұрын
On setting the fonts in the system's site Global and Typography settings, I noticed that you went through each individually and set the font family. I used to do that but I found that you can keep all of them to Default and then just set the Body typography to the font family you want to be Default. Thanks for all you do... we appreciate ya bro!
@rodlivz Жыл бұрын
Wow! Now this is an interesting approach... Hmmm... I will try it out.
@ManoMomen Жыл бұрын
Great video, another way (easier from my side) is using plugin called OMGF, it will easily store your already-used google fonts to your website files without any manual uploads.
@user-tz7mt7ed6b7 ай бұрын
Can you turn off "Google Fonts" in the Advanced Tools settings once the font have been loaded once?
@paige470 Жыл бұрын
This is super helpful, thank you for going down the rabbit hole for us!
@dewolf.digital Жыл бұрын
Boom! I'm absolutely stoked to find this performance tweek. Jeff thanks for putting the time and effort to create and share this tech nugget with us all. I've put it into action and reduced the font size by 70%. Love it. My starter sites and workflow have been updated. You're a gold mine Jeff - Keep up the great work
@WIThEMaN2 Жыл бұрын
One of the best and unique video's on the entire internet. Thanks 🙏
@chrisjohnson359010 ай бұрын
I just love this channel, great place to be. Very well explained and delivered. Thanks Jeff
@panoptic1012 ай бұрын
Thank you so much for this. An excellent tutorial, clear and informative.
@LytboxStudio2 ай бұрын
Thanks!
@JacksonPathilchirayil Жыл бұрын
Amazing Technique to optimize fonts & improve our site speed. Thank you for going down the rabbit hole and getting an amazing solution!!
@farhanmirza8329 Жыл бұрын
Hi, Again love to see you here As a web designer, I never paid much attention to fonts thanks a bunch for sharing the valuable lesson you really deserve a million subscribers ❤
@pixelgap Жыл бұрын
I have been waiting for this video to come out and I am not disappointed at all. I will definitely try your advice. Thank you
@juliejordan3726 Жыл бұрын
WOW, I learned WAY more than I thought I would with this video. Thanks for the explanations of everything too. Great video.
@kamdanibwp7 ай бұрын
I am in learning and it took so much time for me to get the right solution to reduce the bandwidth consumed by fonts. Thank you very very very much. God bless you. Jazak Allah o Khairaa mr jeffrey.
@creativesocialmedia10 ай бұрын
This find is a gold mine. Thank you Jeffrey!
@kauanyduart Жыл бұрын
Jeffrey thanks for this amazing tip! We are all very grateful!
@parthosarkar5270 Жыл бұрын
VERY INSIGHTFUL!! Can't believe I always saw that format and never stopped to think how it could be different.
@adibmula Жыл бұрын
th section from 4:49 is super helpful! people never really touch on the different thicknesses. thank you mr. jeffrey :) really helpful for my blog making journey
@benjaminpau39825 ай бұрын
Been thinking about this for a while now so thanks a lot for the great content! Subscribed!
@LytboxStudio3 ай бұрын
Awesome! Thank you!
@huucong1994 Жыл бұрын
Thank you so so much Jeffey. This tutorial save my life
@EliasRise3 ай бұрын
THANK YOU Jeffrey!
@LytboxStudio3 ай бұрын
Thanks! 🙏
@kingmatolo8381 Жыл бұрын
When uploading text files, I usually upload WOFF, WOFF 2 and TTF at the same time because I wasn't sure. Thanks for the video
@LytboxStudio Жыл бұрын
I’m glad it helped. I also wasn’t sure. It’s not a bad thing at upload TTF as long as it’s optimized. It’s usually the TTFs that make font files large and really not needed anymore.
@DonDiablo_US Жыл бұрын
Thank you. Great video.
@LytboxStudio Жыл бұрын
Thanks!🙏
@brianholt608311 ай бұрын
Great work sir. Thanks for going down the rabbit hole for us
@gabrielk5497 Жыл бұрын
Thanks a lot, I used to upload all file font extensions and your tutorial cleared It all Up! I love your content and how you develop them so precisely
@user-gw9jx9yu8k5 ай бұрын
It's a treasure trove!
@FahdJeddah9 ай бұрын
Great video thanks. I reduced my fonts from 800k to 130k Thank you again 🌹
@pedramlotfi Жыл бұрын
In fact, SVG fonts has the lowest file size ever, not even KBs. FYI. Rest of the video is good. Bravo. Thanks.
@KieranMcCarthy8 ай бұрын
Thank you for this explainer.
@nikolacosovic38268 ай бұрын
Thanks for this amazing video - I tried it, and it works perfectly! I am quite new in my Elementor adventure, and It would be great if you could share the "em size and weight" of your Font Style Guide.
@LytboxStudio8 ай бұрын
Good idea. I use rem only for my font sizes and the only time I use em is for the line height and sometimes letter spacing. For em, the bigger the font size, the lower the em. I’ll have to make a video on typography soon 😉
@comleonmoto Жыл бұрын
Fantastic! I'm a bit more clever tonight here's to you! Thanks 👏
@coreykretsinger Жыл бұрын
This was a GREAT video Jeffrey, THANK YOU!
@himalayanKite Жыл бұрын
Really really Useful Vid!! Thank you pal
@LytboxStudio Жыл бұрын
Cool thanks 😎
@majidkhokhar80596 ай бұрын
sir solute on your this effort❣
@jacobwwarner10 ай бұрын
Just got this done for a client's website transitioning over to Elementor. Some font files downloaded from Google fonts weren't able to be converted though saying that the font files were corrupted.
@dumisaniluthango14219 ай бұрын
Thanks for the insightful help. Great tutorial!
@JohnXionidis Жыл бұрын
Awesome! Very helpful video, thank you!
@LytboxStudio Жыл бұрын
Thanks John much appreciate!
@TheMaydazz25 күн бұрын
Thanks.
@harbourdogNL Жыл бұрын
Great piece, thanks. I come from a print background and am an absolute type-setting nazi. Biggest peeve is seeing straight quotes with serifed typefaces, and I see it everywhere...have even seen it in credits for shows on Netflix and Prime. Proper typesetting died after the advent of "desktop publishing"! Let me tell you about the client who wanted all his headlines done in Zapf Chancery...all caps, no less...
@YaNykyta Жыл бұрын
Well done oldboy! Well done! Thank you!
@WTPleo6 ай бұрын
Banger
@moncholo_ Жыл бұрын
My friend ! great content.. new suscriber !
@harrinsonA Жыл бұрын
Excelente Tutorial!
@LytboxStudio Жыл бұрын
Thanks! Much appreciated
@Luca-ui3rn11 ай бұрын
Awesome content - pls create more advanced videos like this - so you will get much more subscribers than other channels, which make only basic stuff
@thomashercar Жыл бұрын
This is brilliant!
@LytboxStudio Жыл бұрын
Thanks!
@predestineddesigns Жыл бұрын
This was a huge gem, thank you
@NOALNOM Жыл бұрын
Excellent!!! Great thanks 4 sharing!!!
@wgm2477 ай бұрын
This is great! Can i ask what your personal fav heading and body fonts are? I value your opinion having studied fonts for a part of your life. Thanks!
@beatriceprinz6308 Жыл бұрын
Thanks for such great explainer video. Love it much!
@williamsouza2110 Жыл бұрын
thk jeffrey that was excellent, help me a lot.
@JRMN_NL Жыл бұрын
Great video, but how about to handle with a variable font? So you don’t have to set different subsets..
@CarlRing05 Жыл бұрын
Great video and thanks for sharing with us. Can i please ask you what is that side bar you keep clicking on the left that slides out with links on? Looks a real handy tool to have. Thank you
@LytboxStudio Жыл бұрын
Thanks! That’s the Arc Browser. The Mac version just releases to public and windows is in beta. It used Chrome but makes it more organized and productive.
@baloogsd18 ай бұрын
Mr.'s version is high for pro elements
@LytboxStudio8 ай бұрын
🙏
@AIContentHacker Жыл бұрын
Tks! Going to try it out~
@playercool003 Жыл бұрын
Learnt a lot..thnks!
@campusconnecttv1709 ай бұрын
Brilliant..
@Discoverwebsolutions Жыл бұрын
Thanks for this great video!
@marcobuglio8096 Жыл бұрын
thank you so much 👍
@LytboxStudio Жыл бұрын
You got it!
@visualmodo Жыл бұрын
Very good work!
@PauloGomesdesign Жыл бұрын
I went buy a hat just to take it off for you! Excellent tutorial!! Thank you
@BalloonSchool9 ай бұрын
5:30 You said you would use 3-4 versions of a font. I just installed Roboto Regular on my wp elementor site. Elementor itself offers in "Site Settings -> Typography the option to change the "Weight" from thin to bold. For what should I install now more different Roboto fonts? Thanks so much for your great videos!
@tannerkalvelage6450 Жыл бұрын
Great video!
@master_hoosney Жыл бұрын
Thank you so much !!
@Jutenas Жыл бұрын
Great stuff!
@werbekueche Жыл бұрын
Thank you so much for this video! I had some Pagespeed issues with one client Website and I was shocked as I saw the font file sizes! You really help me out solving this! Based in Germany, the GDPR is so important, you won‘t mess with it! Will everything be okay, if I‘m leaving out some font weights, italic style or the font formats you recommend Not to use any more? Many Greetings!
@unifiedbiznesstech2482 Жыл бұрын
A big thanks to your effort to find this out. Will definitely help my website load faster..as for the webbrowser tab on the left, is it form chrome? Pretty useful.
@mofodm Жыл бұрын
Great video dude! Thanks for your help. I have a question, does Elementor or the browser usually deliver the most optimized font? I'm just wondering why have WOFF and WOFF2. How does it work? Thanks!
@LytboxStudio Жыл бұрын
WOFF 2 should load first and then WOFF as a fall back. They both won’t load at the same time. All depends on the browser
@janbekabdurakhmanov474 Жыл бұрын
Thanks a lot!!!
@balazs_a Жыл бұрын
Great video, thank you! What is your opinion about the OMGF plugin? As I understand it, it makes the same thing (storing the fonts locally), but I think it's easier and faster to set it up.
@LytboxStudio Жыл бұрын
I’ve heard good things about OMGF and it can make things easier and faster. But I try to reduce to amount of plugins on a site and if good ol’fashion good practices with a little extra work can reduce a plugin, that’s what I’d go for. OMGF has a few extra features that are worth it, but it still doesn’t optimize the font file so you’ll still get that large TTF file uploading.
@jabeztadesse Жыл бұрын
12:52 I sleep on my side ... JKs aside this vid is top notch Thanks!
@Kazoompie Жыл бұрын
Great video! One question though.. can you please tell me the EM size and Weight for ‘small title, large body text, body text, small body text and button & menu text’?? Thankssss! 👌🏻👌🏻
@andrese.castillo8869 Жыл бұрын
amazin'
@LytboxStudio Жыл бұрын
Thanks!
@andreytrofimov1165 Жыл бұрын
👍top, very good
@jillciporin85119 ай бұрын
Hi, Jeff - I did exactly what you said but Font Squirrel is saying the files I downloaded from Google Fonts are corrupted?
@mugpielhokiАй бұрын
had this problem too, so I downloaded the font from Font squirrel and it works.
@lior32256 ай бұрын
Hey Jeffrey, really appreciate the great advice! I attempted to optimize some fonts from Google Fonts, but ran into an issue where I received an error saying "the font is corrupt and can't be converted." Any suggestions on how to tackle this?
@nmdk-design5 ай бұрын
same problem here
@orientation.quebec5 ай бұрын
Thanks Jeff, why google dont optimise the fonts, and what is not GDPR compliant and why (this part i dont understand)
@LytboxStudio5 ай бұрын
Good questions. Google only serves the TTF files which are large. They don’t server woff or woff2 which are optimized. It’s Google so…. If you connect Google fonts by the link to embed, Google collects data from the sites the fonts are linked to and thats a GDPR no-no. Always download and install onto your sites.
@pburmester Жыл бұрын
Great video! But, not sure why, but everytime that I try to upload a Google Font (Nunito Sans) to Squirrel I received an alert saying "this font is corrupt and cannot be converted." Any idea why? It seems that this doesnt work on variable fonts :(
@MarcelLeteriTech6 ай бұрын
Having the same problem with Open Sans. Did you find a solution? Cheers
@pburmester6 ай бұрын
@@MarcelLeteriTech no bro, sorry... I just upload the files without using this optimization thing 🥴
@ilyaselharoui4130 Жыл бұрын
Hello man been supporting your website building videos for years and I really want to implement a certain animation for my website. Could you help me with that? Would help out a lot!
@LytboxStudio Жыл бұрын
Aw thanks! What kind of animations are you looking for? And check out the Lytbox Pro’s - It’s our new space where I can do a lot more to help and support lytboxacademy.com/the-academy
@katrinstoilova2212 Жыл бұрын
Big thanks! I tried this method and it works perfectly well with any latin letters. However, for cyrylic fonts (e.g. Monsterrat), after the converting they all look the same, t.e. the font does not look like on the google fontws website, do you have any idea how I can fix this?
@BalloonSchool9 ай бұрын
10:20 I looked if there is an offical roboto woff font available but I just can find tff´s. Does this means, that font squirrel is creating the woff file from for example the roboto.tff?
@dontrez8412 Жыл бұрын
A person could watch this video and it will cover MOST of what they probably came here for. I thought about Unsubscribing JUST so that I could Subscribe again, but that wouldn't make sense. What's not clear is how to optimize our fonts the same way, but installing them onto our systems without Elementor Pro. Astra has the 'Custom Fonts' plugin. What if we are just using any old Theme/page builder? Is there another plugin/method that can help with that situation? Does Gutenberg have its own version of this with all its updates or do we have to use the Header php code method? Thanks!
@pezreloaded8436 Жыл бұрын
Remember that gif of the mario Brothers Mushroom head Hype Overload...that's me right now from having watched this vid! 🍄🍄🍄
@mdqmatias Жыл бұрын
Hey Jerry, what browser are you using?
@LytboxStudio Жыл бұрын
Arc - It’s dope and geared towards productivity
@mdqmatias Жыл бұрын
@@LytboxStudio nice, i will check it out!
@southbanktkd8 ай бұрын
I was going to try this...however, I noticed that the Performance Grade of 87 remained the same after using the optimised fonts AND you need to upgrade to ELEMENTOR PRO to allow custom fonts.
@LytboxStudio8 ай бұрын
I’d look at the load time and page size after optimizing. See if they go down. There’s most likely other factors impacting your page score. This just helps your site load faster. Also, everything I do is the Pro version of Elementor and I’d never recommend the free version. I value time and the free version is just like a ‘give it a test’ version, you can’t do anything. Get the Pro and save time and headaches 😉
@hamshank299 ай бұрын
the font squirrel tool didnt give me the font files in Woff formatt, the kit just has css and hmtl files. What am i supposed to do ?
@StreetFamzz Жыл бұрын
I followed your steps but I only added three Poppins 400, 600 and extra bold 800. My question is what happens if I change the bold setting inside elementor to let's say 500 bold. Will it fall back to another font ?
@LegendsPlays Жыл бұрын
Great tutorial, only issue I'm currently experiencing is that I get the error "sorry you're not allowed this file type" when uploading to media library
@LegendsPlays Жыл бұрын
I also have an issue specifically with Coromant Garamond... I've downloaded it from Google fonts multiple times, each time I get a corrupt error when trying to upload to the font generator
@nmdk-design5 ай бұрын
On font squirrel, I receive an error message: "The font 'raleway-bold.ttf' is corrupt and cannot be converted"
@elifhale937910 ай бұрын
I am getting an error saying my ttf file corrupted while uploading the fontsquirrel. Do you have any idea why that can be happening thank you
@igolovin87 Жыл бұрын
Ask Elementor to add the ability to set variable fonts
@LytboxStudio Жыл бұрын
That’s a good one. I haven’t tried variable fonts yet in El. Looks like I got some testing to do 😉
@Fistulago11 ай бұрын
While uploading it's say corrupted file
@johanstam3602 Жыл бұрын
Can you switch to local installs after you used google fonts in the widgets for a while?
@LytboxStudio Жыл бұрын
You’d need to go through the site and change your fonts If you used Global Font Style, it can be less painless. But if you manually selected the fonts in each widget, you’d have to go through and change them to the custom fonts.
@susandenise517 Жыл бұрын
What about Adobe fonts?
@LytboxStudio Жыл бұрын
THB, I try and avoid them and only use fonts I have full access to. There are ways to down the Adobe fonts but… that does go against their terms I think
@philwatson86947 ай бұрын
Great video but damn this doesn't work for me. I compressed the fonts in font squirrel but after uploading them to elementor they don't work on a page. I've just uploaded the woff and woff2 for poppins bold and it shows on the page as arial - any suggestions?
@philwatson86947 ай бұрын
Solution: the fonts were using http instead of https, and after switching to https I hadn't updated the site address manually.
@rswebmarketing9 ай бұрын
What to do when the files is corrupted ? Yet I downloaded it from Google Font...
@Fistulago11 ай бұрын
Can you provide Font files here ?
@wordpressjunkie8830 Жыл бұрын
If you keep delivering this quality of content I'm gonna have to give you a kiss and that would suck cause I don't like dudes!!
@LytboxStudio Жыл бұрын
Haha not sure how my girlfriends gonna feel about this 🤣
@wordpressjunkie8830 Жыл бұрын
@@LytboxStudio Oh well, look at that he said girlfriends in plural 🤭
@LytboxStudio Жыл бұрын
@@wordpressjunkie8830 haha it was a typo! You’re gonna get me in trouble 🤣
@wordpressjunkie8830 Жыл бұрын
@@LytboxStudio oops! 😅
@japoon Жыл бұрын
ADOBE
@user-jn6vo2pk8c Жыл бұрын
This is probably a good way to reduce the size of your website and speed it up. But! I tried it. Wrong way and wrong advice. The matter is that the font generator that the author recommends (and I think other generators will give the same results) changes the appearance of the font - its size and weight. I tried different settings of this generator. The result is the same. As a result, the pages look completely different, including all the text blocks proportions, headings, etc.
@LytboxStudio Жыл бұрын
I’ve used this with dozens of fonts both custom fonts I bought and Google fonts and have had no differences in the font point (size), weight, spacing or kerning. I’ve testing this thoroughly. If something changed for you it might have been a specific font or something done wrong in the process.
@LytboxStudio Жыл бұрын
Feel free to share the font you tested it with and the website using the font. It would be helpful to run a test and see what’s happening
@user-jn6vo2pk8c Жыл бұрын
@@LytboxStudio Thank you for the reply. The font I used is Manrope. Even when I compared the original ttf and modified one it was good seen the difference. And that difference is much more noticeable on the webpages unfortunately (
@LytboxStudio Жыл бұрын
Hey @Дмитрий Караванов I ran a test, downloaded the TTF from Google fonts an optimized to Woff. Here's page with the test - wordpress-513216-3469525.cloudwaysapps.com/testing-manrope-font/ The top font is the original and the bottom is the optimized. Everything is the same but I did find 1 issue. When left the font size at 16px or 1rem the optimized had a bit more spacing. I looked even deeper on this and saw the issue is with the original font. The thing about fonts, they are not all built equally. Kind of like websites, they can have flaws. The Manrope base 16pt font was over condensed. The optimized font fixed the original font's error and is more readable. I hope this helps and let me know if you have more questions. I'm happy to help break this down more. Typography is a surprisingly challenging area in design and I'm happy to go deeper into it to better help. Cheers!
@user-jn6vo2pk8c Жыл бұрын
@@LytboxStudio Got it! Now I'm clear why all the modified litters look smaller than my existing font. Indeed I set up my base font with 1rem=16px and all settings of titles were done by clamp method. Probably that's why everything looked too small. So perhaps I had to change 16px to 17px for saving current view of my website. Thank you for the explanation 🙂