How To Add Custom Fonts To Elementor Free Or Pro For Better WordPress Webdesign
ฝัง
- เผยแพร่เมื่อ 2 ธ.ค. 2024
- Adding custom fonts can make a huge difference for any website and in this Elementor tutorial I will show you how to add them to the free or pro version of Elementor
Astra: www.wpcrafter....
Elementor: www.wpcrafter....
So I gotta tell you, and take some credit, this was kinda my ideal. Haha.
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart -- www.wpcrafter.... (SAVE 50% Auto Applied)
🟡 SureMembers -- www.wpcrafter.... (SAVE 50% Auto Applied)
🟡 Presto Player -- www.wpcrafter.... (SAVE 33% Auto Applied)
🟡 Astra Theme -- www.wpcrafter.... (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows -- www.wpcrafter.... (SAVE 40% Auto Applied)
🟡 Cloudways -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss -- www.wpcrafter.... (SAVE 10%)
Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra -- www.wpcrafter....
🟡 Elementor -- www.wpcrafter....
🟡 Beaver Builder -- www.wpcrafter....
🟡 Divi -- www.wpcrafter.... (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List -- www.wpcrafter....
🟡 Cloudways -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger -- www.wpcrafter.... (SAVE 75%)
🟡 NameHero -- www.wpcrafter.... (SAVE 70%)
🟡 SiteGround -- www.wpcrafter.... (SAVE 70%)
CONTACT WPCRAFTER
☑ Website -- www.wpcrafter.com
☑ Facebook Group -- / wpcrafter
☑ Twitter -- / wpcrafter
☑ Twitter -- / adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link.
Thanks, worked. At first the custom font only showed up in the page editior and not in the Global Fonts settings - I had to restart Elementor, then it was available in the Global Fonts Dropdown. I love you.
Very, very few people make tutorials that present the information as clearly as you do. Thank you.
You're a lifesaver! Elementor (Free/Pro) has not updated their list of Google fonts and your tip worked like a charm.
Adam just want to comment the great work you done here. Im just starting out using wordpress and elementor, and times and times, when I have a specific problem that I thought cant be solved, and times and time again your video tutorials saved my ass, thank you so much!
Your tutorials are FREAKING AWESOME!!! I could not for the life of me figure out why my fonts wouldn't work on other search engines until I came across this video!! TH-cam needs to make a two thumbs up tab!!!
Hi there. I added everything correctly, but when I choose the font, it doesn't work, nothing changes. The selection comes up but the font doesn't change when I select it. Why would this be? Thanks in advance.
Thank you for this! I was going crazy because I created an entire brand for my blog- and Elementor only has so many limited fonts and mine was not listed. I really didn't want to buy the pro version just yet- and this is exactly what I was looking for!
Thanks!... There's a couple of confusing things you didn't touch on though - relating to using Astra v Elementor. I'm a newbie - I note if you add fonts with Custom Fonts plugin you only add a single font, not the whole family of fonts? And with Elementor you add the family, but seems pointless since you set the weight yourself and it doesn't seem to take on the attributes on the font? On top of that you have to uncheck 'Disable Custom Fonts' in Elementor if you want to use the theme fonts. Finally, with the theme fonts you seem to get more control over H1, H2, etc, whereas Elementor just has 'Main' and 'Sub' or something like that? So basically, I'm still pretty confused : ) .. I even deleted my custom fonts, but the header still displayed them... I can't work out how they are all supposed to play together and how to set fonts ONCE for H1, H2, etc, and have them work everywhere .. and whether you even need the font 'family' or just one? : )
Thank you, Adam, very useful.
first tutorial that has served me after days looking online, thanks
You're the best Adam! Thank so so much!
Thank you so much for this tip, Adam. I have however just hit a snag. I guess Elementor has since updated their platform so that custom fonts only works for the Pro version. Any tips on which WP plugins I could use for custom fonts?
Very helpful. Great example of why I have subscribed.
If your theme has fonts installed, you can also just load the Custom Fonts plugin, add a font with the same name as the font used in the theme, and save. Then in Elementor you can just select that font and it will find the font as it's already been registered in the theme. No need to upload any files. :)
What a great workaround. I do think they pushed an update out to the plug-in so it would work.
Amazingly useful!
Thanks for your help, still works
Hi Adam, I like your Elementor tutorial, they are always clear and to the point :)
I agree!
Great video and plugin. Love that you keep the bloopers in there.
This would be great for lifterLMS where Astra is doing a great job to style the page so no editing is required with Elementor but ensures consistency across the pages. 😀
Gotta keep the bloopers, LOL! Thanks for watching Sheridan Barrett.
Great video man! Thank you for making it \m/
Custom Fonts plugin also works with Thrive Architect. Extremely helpful!
Thank you..Very complete tutotial.
Do you have any videos regarding the options of px, rem, em or vw when selecting font sizing?
Thanks for your guidance :)
You helped me a lot!! Thank you!!
Awesome as usual. Do you think this would speed up your site, even a little, over Google fonts? I mean, if I turned off Google fonts and just used custom fonts, I know I would loose one request but any other advantage?
Thank you. I really needed this tutorial.
Great add-on...love the fact I can add as many weights as possible. Side note (unrelated) - Have you used flexible elementor panel? It's pretty cool - allows you to drag, fold and move the panel. Very useful if you want to see design always how it will look instead of collapsing. -plus I actually love the UI look - more adobe-ish :)
Thanks for watching Josh Allen!
Hi - great video with helpful info on font files. Thank you! The only issue is there is no Custom Fonts tab in the appearance panel anymore? I already have a font installed via syncing a Typekit project, but I also have a body font from Google I want to install. Where do I do this now that tab is no longer there? I have Elementor Pro.
Great tutorial, Adam (as always)...thanks so much.
I think you are cool Adam ! thanx for all the videos
I needed this tutorial so thanks. : )
I'm glad this was helpful Holly Becker and thanks for watching.
I like the Playfair Display - Poppins combo.
Amazing video :) Thanks
Thank you very much. This tutorial helped tremendously.
So helpful! Thank you!!!
Thank you Adam!! 😉
excellent! all work perfect
It really helped me, Thanks!
Great tutorial. It really helped me.
Thakyou Adam! greetings from Costa Rica.
I like to set website fonts in GeneratePress, turning them off in Elementor. Wish there was an easy way - like you demoed with Custom Fonts - to add them to GP in the same way as with Astra.
Thanks for watching Ian Bowden!
love all of your videos thank you..
THANK YOU, YOU SAVED MY LIFE TODAY, GOD BLESS YOU GOOD MAN.
Thank you, thank you, thank you!
big hug from Malaysia
In current version of Elementor that problem with defolt custom font is solved ) So now it works right.
Hey, Adam! I'm using this font service fontstorage.com but there is .ttf only availible to download in English version. However, you can go to the Russian version fontstorage.com/ru/ and translate it with Google Chrome in English. In this case there will be availibility to download web fonts.
Good luck! =)
Thanks WPLovers - о Wordpress понятно и с любовью!
thx so much gru, i loved your movie
thank you so much you really saved my life
Great video ! I just didn't want to chande 200 text-boxes individually, so I used custom css to add the custom font style directly to header and paragraph elements. Worked great.
Now I want to get rid of the original google-fonts, but I think therefore I have to dive into the functions.php ... ?
Really solid tutorial, thank you for the hard work!
This was very helpful, Thanks
Thank YOU, for your very educative videos ;)
Hi! Very clear video. I have Elementor Pro and everything seemed to work. However - The custom font I downloaded is not the same typography as the one I see on the Elementor page - Is there a cause of this? I can't seem to figure it out.
Great Video!
one thing i wana ask is there any way we can add all font weights to a family in one time ? Is that possible ?
thanks lovley & Simple
Hello Adam. Can you please explain how you to select right font for headers and for content. Thank you.
I usually choose a font pair using one of the various popular font pairings sites.
Always a life saver
Very helpful
Glad to hear that
thought this man was insane until i realized my playback speed was set to 1.75
LOL wtf?
Custom fonts not updating on safari
Thank you, Adam!
You're welcome, thanks for watching.
You are the best!!!
Thank you Eric Rivera & thanks for watching.
Great Tut. Quick question - If fonts are already hosted on google server, why do we need them to be added to our site?
You don't need to add google fonts to your site. This is about adding custom fonts that are not hosting or available for free from Google.
Perfect!! thank you!
I love you!! hahaha excelent
Thank you, I got it.
Thank you very much . you saved me a fortune.
Toma tu like, buen hombre!
Great video, friend! Thank you very much. I will subscribe to your channel
:)
On my version of Elementor 2 I cannot get text(about 2000 words) to into all three columns. Does not seem to cover it in the video.
All of the Text goes into the first column leaving the others empty.
Hi, this plughin does not show me my fonts on HTTPS, what should i do?
WELL ... THANK YOU DUDE
Maybe it's been said already but beside the compression, there is another reason for the multiple formats: some browsers don't support all of them!
Thank you for adding that Sam.
You best guy:)
Excellent
Hi Adam, very useful tip. I tried this with OceanWP but it didn't work. Do you know a plugin that would work with OcenaWP?
Thank you!
Where do you get your fonts from? I've built a brand kit on cava with the pro version and then ive tried to download fonts from the internet that are the same as the ones im using on canva, and they aren't working!
Hi there, i know this is old, but i hope maybe someone can help.
Whenever i activate the Custom Fonts plug in, and go to Appearence -- Custom Fonts, instead of opening the Custom Fonts settings, it gets me to Pages page, cant find and fix, and going crazy over here.
Help please
THANK YOU SO MUCH
Are Custom Fonts like this following the DSGVO standard?
fantastic! tq
Hello Adam, How would I get custom fonts into the betheme muffin builder? The fonts inside are so limited.
Thank you! I actually watched the Official Elementor video on this when it came out, and thought this was too complicated for me and just left that for the pros! ;) But you explained it in a way that sounded easy and I did it! Thank you! and thank you for the Free Elementor Essential course! watching it now! WIN_WIN_WIN!
I'm glad this was helpful Milla Ezman and thanks for watching.
What about custom CSS? I read on the plugin page "If you’re not using any of the supported plugins and theme, you can write the custom CSS to apply the fonts." Any example for it? (wordpress.org/plugins/custom-fonts/#description)
I am using OceanWP. Can I use plugin Custom Fonts with the theme and apply it??
Thanx, will it work with Arabic fonts?
I have .otf file of HK Grotesk font. Is this format supported?
How do i Set one font for the whole site . Where is the option
Thank You Thank You !!
You're welcome eng.ruqaiya al-azzawi! Thanks for watching.
I have this error: "Sorry, this file type is not permitted for security reasons." how can I fix it?
Thanks man, you really saved me here, like and sub!!! :D
Happy to hear that, thanks for watching.
Hmm, this is really interesting! Will definetly play around with this on a demo site
Thanks for watching YASIR tim!
hey buddy i have a questuons that how can i download the custom font family file???
??
Hi Adam, I'm running Elementor Pro with GP Premuim and cannot get the .TTF to drag into my library. Message says, "Sorry, this file type is not permitted for security reasons.". Any idea what I could be doing wrong? Thanks.
Did you get the solution? I got this problem too.
It works for Korean! Thank you so much :D
Unauthorized extension. Allowed are: JPG, PNG, GIF, BMP, TIFF - Dragging and dropping is not working either! I can upload a custom font into the Media Library but I get the error message shown at the beginning of this comment. So it looks like I won't be able to use these fonts, even though I can get them into WordPress Media Library.
10 000 thanks !!
Hey, Can you share some website from where i can download free custom fonts for web?