How to Optimize Fonts & Improve Your Site Speed (for WordPress, Elementor, Bricks, and More)
Vložit
- čas přidán 11. 06. 2024
- In this video, we look at reducing font file sizes by up to 90%! We also look at how to add fonts to our WordPress and Elementor sites using best practices.
===================================
🟣 ////// Learn Powerful SEO for WordPress
lytboxacademy.com/seo-for-wor...
===================================
🟢 ////// Master Elementor with Better Designs
lytboxacademy.com/design-with...
===================================
🔵 ////// Learn to Build and Sell WordPress Maintenance & Care Plans
lytboxacademy.com/maintenance...
===================================
🏆 ////// Become a Lytbox Pro Member
lytboxacademy.com/the-academy/
===================================
🌟 ////// Personal 1-On-1 Elementor Training
tidycal.com/lytbox/elementor-...
===================================
////// The Hosting I use:
👉 Hostinger (Best for beginners & smaller budgets)
www.hostg.xyz/SHDX8
👉 Cloudways (Best for scaling web businesses)
www.cloudways.com/en/?id=485185
👉 RunCloud (Best for professionals)
runcloud.io/
////// WordPress Tools I use:
👉 Bricks Builder
bricksbuilder.io/
👉 Elementor
be.elementor.com/visit/?bta=4...
👉 Breakdance
breakdance.com/ref/390/
👉 Crocoblock
crocoblock.com/?ref=2021
👉 SEOPress Pro
www.seopress.org/?ref=854
👉 Perfmatters
perfmatters.io/?ref=1230
👉 WP Umbrella
wp-umbrella.com/?fpr=jeffrey83
👉 InstaWP
instawp.com/?via=jeffrey
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementor #elementortutorial #elementorpro #websitespeed - Jak na to + styl
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
Thank you so much for this. An excellent tutorial, clear and informative.
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!
Thanks @Menduksay!
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
This was a GREAT video Jeffrey, THANK YOU!
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!
Wow! Now this is an interesting approach... Hmmm... I will try it out.
Thanks for the insightful help. Great tutorial!
Thank you so so much Jeffey. This tutorial save my life
This find is a gold mine. Thank you Jeffrey!
THANK YOU Jeffrey!
Thanks! 🙏
Great work sir. Thanks for going down the rabbit hole for us
Thanks for such great explainer video. Love it much!
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
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
VERY INSIGHTFUL!! Can't believe I always saw that format and never stopped to think how it could be different.
Jeffrey thanks for this amazing tip! We are all very grateful!
This is super helpful, thank you for going down the rabbit hole for us!
WOW, I learned WAY more than I thought I would with this video. Thanks for the explanations of everything too. Great video.
I just love this channel, great place to be. Very well explained and delivered. Thanks Jeff
One of the best and unique video's on the entire internet. Thanks 🙏
Amazing Technique to optimize fonts & improve our site speed. Thank you for going down the rabbit hole and getting an amazing solution!!
Excellent!!! Great thanks 4 sharing!!!
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 ❤
Really really Useful Vid!! Thank you pal
Cool thanks 😎
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.
Thank you for this explainer.
thk jeffrey that was excellent, help me a lot.
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
This was a huge gem, thank you
Been thinking about this for a while now so thanks a lot for the great content! Subscribed!
Awesome! Thank you!
My friend ! great content.. new suscriber !
Awesome! Very helpful video, thank you!
Thanks John much appreciate!
Thank you. Great video.
Thanks!🙏
Fantastic! I'm a bit more clever tonight here's to you! Thanks 👏
Well done oldboy! Well done! Thank you!
Learnt a lot..thnks!
Thanks for this great video!
sir solute on your this effort❣
Excelente Tutorial!
Thanks! Much appreciated
Thanks a lot!!!
Very good work!
Tks! Going to try it out~
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.
Can you turn off "Google Fonts" in the Advanced Tools settings once the font have been loaded once?
Thank you so much !!
Great stuff!
Great video!
It's a treasure trove!
This is brilliant!
Thanks!
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.
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!
thank you so much 👍
You got it!
Brilliant..
👍top, very good
Very informative video… thanks @jeffrey 🤘
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!
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.
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 😉
Banger
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.
Awesome content - pls create more advanced videos like this - so you will get much more subscribers than other channels, which make only basic stuff
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
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.
Great video thanks.
I reduced my fonts from 800k to 130k
Thank you again 🌹
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!
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
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.
Great video, but how about to handle with a variable font? So you don’t have to set different subsets..
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! 👌🏻👌🏻
amazin'
Thanks!
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...
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?
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.
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.
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?
Hi, Jeff - I did exactly what you said but Font Squirrel is saying the files I downloaded from Google Fonts are corrupted?
In fact, SVG fonts has the lowest file size ever, not even KBs. FYI.
Rest of the video is good. Bravo. Thanks.
I went buy a hat just to take it off for you! Excellent tutorial!!
Thank you
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!
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
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 ?
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
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 ?
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?
same problem here
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!
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
Remember that gif of the mario Brothers Mushroom head Hype Overload...that's me right now from having watched this vid! 🍄🍄🍄
On font squirrel, I receive an error message: "The font 'raleway-bold.ttf' is corrupt and cannot be converted"
12:52 I sleep on my side ... JKs aside this vid is top notch Thanks!
Mr.'s version is high for pro elements
🙏
Thanks Jeff, why google dont optimise the fonts, and what is not GDPR compliant and why (this part i dont understand)
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.
While uploading it's say corrupted file
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
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
Can you switch to local installs after you used google fonts in the widgets for a while?
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.
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!
Hey Jerry, what browser are you using?
Arc - It’s dope and geared towards productivity
@@LytboxStudio nice, i will check it out!
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?
Solution: the fonts were using http instead of https, and after switching to https I hadn't updated the site address manually.
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 :(
Having the same problem with Open Sans. Did you find a solution? Cheers
@@MarcelLeteriTech no bro, sorry... I just upload the files without using this optimization thing 🥴
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.
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 😉
Can you provide Font files here ?
What about Adobe fonts?
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
What to do when the files is corrupted ? Yet I downloaded it from Google Font...
Ask Elementor to add the ability to set variable fonts
That’s a good one. I haven’t tried variable fonts yet in El. Looks like I got some testing to do 😉
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!!
Haha not sure how my girlfriends gonna feel about this 🤣
@@LytboxStudio Oh well, look at that he said girlfriends in plural 🤭
@@wordpressjunkie8830 haha it was a typo! You’re gonna get me in trouble 🤣
@@LytboxStudio oops! 😅
ADOBE
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.
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.
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
@@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 (
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!
@@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 🙂