Use Custom Fonts on Existing Website Build - Remove Google Font - Elementor Font Wordpress Tutorial

Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
This is how to Use Custom Fonts on Existing Website Build - Remove Google Font - Elementor Font Wordpress Tutorial
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your KZbin Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 [e-mail]
👩‍💻 Visit websquadron.co.uk

[@hamzaafridi7058]

Perfectly explained! I always got confuse in them, But not anymore. Thank You So Much!

[@coffeebot3000]

I like the idea of nature and the universe choosing font names.

[@Restoredetailaz]

Appreciate your help with your videos! What's your recommendations for for each device page content width in the site settings?

[@akinsanmitaiwo7125]

Thanks for the tutorial. Wish I could smash the like button a hundred times.

[@websquadron]

Hope it helps you.

[@werbekueche]

Thank you for this great and compact explanation! A very important topic that I am currently working on. I have 2 questions about it and would be very happy if you could help me. This may also be of interest to the community. Firstly, I have a customer who would like to use the "Georgia" font. As a system font, I don't have to upload it and I can't influence which font weights I want to use, can I? On the other hand, there are some Variable Google Fonts. Do you know how I can upload these to Elementor so that they work properly? Many thanks and best regards from Germany.

[@websquadron]

You could just use Georgia without custom loading, and you can change the font sizes. Google Fonts will have versions that are not just Variable.

[@Restoredetailaz]

Hey Web Squadron! Do you recommend using only WOFF2 , and disregard uploading the other file formats when adding custom fonts?

[@websquadron]

Totally just use Woff2

[@Restoredetailaz]

Sounds good and thank you for the help.

[@douglascapron9814]

Excellent, very helpful. So suppose I followed these steps and uploaded the fonts needed for the site, there is no need to disable or "turn off" google fonts?

[@websquadron]

I would disable once you're done, and use a Preload snippet - see here: kzbin.info/www/bejne/hmXRlqOwgKpjfNU

[@douglascapron9814]

@@websquadron Thanks Imran, that's very helpful.and thx for the quick reply, cheers

[@aquariusageartist]

Thank you soooo much for this video!!! Now its totally clear :-)

[@Steve-xl6on]

Thanks for this! Super useful for existing sites!! Would it also work if the font used throughout the site is 'Default' if you load that specific font as a custom font?

[@websquadron]

Yes as long as you set it in the Global Font.

[@Greg.Mika.]

Hey Imran, just followed your advice and now I don’t have the bold version of my text that I used with the html in the text editor, instead I have a weak one (like 500 in place of 700). Is there something I’m missing? I have uploaded the correct weight in the custom font family and doubled it in both 700 and Bold to be sure… so, I don’t know. I’ using Poppins, btw. Cheers.

[@websquadron]

I can't diagnose without seeing the backend of the site. Sorry.

[@Greg.Mika.]

@@websquadron It's all right I wasn't asking for that ;) Just wanted to know if you had ever encountered that by switching to custom font... btw I've partially solved the issue by replacing by which does the trick in Safari, but not in Chrome :( Maybe I'll have to go the way. Cheers.

[@Greg.Mika.]

Edit: Problem solved. In the Custom Fonts section of Elementor, DO NOT upload the same file in both Bold and whatever weight you've chosen for your Bold style, it cancels out. Just use the Bold one and you're good. Cheers.

[@dewaldwessels1970]

Can you do this custom font via Elementor Pro, but on the latest version as it does not provide an option to load woff2, only TTF. It allowed you to load custom off font file via the ADD NEW -> -*-add name-*- -> ADD STATIC FONT -- there you get the options for all the font file types

[@websquadron]

Hmmm... that might be a host issue?

[@dominmax]

Hi, as far as subset (lat-ext in my case) is concerned it works for me but only using ttf (not woff2) font file (downloaded straight from google fonts site).

[@QuaverloveStudio]

Thanks again, Imran What you you think of using fonts by way of Adobe Fonts web project facility in Elementor Pro, or at all?

[@websquadron]

To keep costs down for Clients, I just usee GFonts.

[@QuaverloveStudio]

@@websquadron Ok. Gotcha.

[@umairsheikh4588]

Does custom fonts will decrease site speed? Or affect anything?

[@websquadron]

Not if they are loaded to the site, just like System Fonts are fine. Fetching Google Fonts is what causes the lag.

[@nidarahman2305]

hi, imran, will there be a fall back font if we disable google fonts from the settings

[@websquadron]

If you set a custom font then no fallback is required but by default it will be roboto

[@sandynash4226]

Hi Imran, any solution for a website not using Elementor Pro? I've followed this advice on a couple of sites but I'm just setting a very basic site up and wonder how to keep the site fast. Any easy fix or do I just wait until we're ready to upgrade this site to Elementor Pro too? Thanks

[@websquadron]

There are other plugins etc and it would depend on how the site is built - but you should be able to preload. Autoptimize and Asset Clean Up, and WP Rocket do allow you to preload fonts.

[@pixelgap]

Thanks Imran

[@teddy_8figure]

The size of my Woff and Woff2 files is too large. Each style varies from 1920 to 3000 Kb. What should I do in this case?

[@websquadron]

That's way too big. Which Font Family are you using?

[@christianlecuyer6380]

Hi Imran, If I got 98% on mobile from pagespeed insight with Google Font, will I reach 100% with custom fonts?

[@websquadron]

Yes if it’s being raised as a recommendation

[@yescreative6030]

Awesome. Thanks.

[@kaludactn]

Thanks for the videos! How I transform the ttf font to woff2?

[@websquadron]

www.fontsquirrel.com/tools/webfont-generator

[@alvianuspradytya]

Does it only apply to elementor-pro member?

[@websquadron]

Yes

[@RobbDev]

Important question, how do you preload Custom Fonts?

[@websquadron]

Add the custom fonts and then use a snippet like the one from here: websquadron.co.uk/page-speed-performance-wordpress-code-snippets/

[@RobbDev]

I’ve just seen your answer sorry, btw you are amazing! Thank you 😊

[@daratittjungatutube]

cannot download Woff fonts from google fonts

[@websquadron]

You can convert here: www.fontsquirrel.com/tools/webfont-generator