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

I'm always going on about page speed performance especially with Google fonts and make sure you custom load that but what if you've already got a website that you've built and you did not use custom loaded fonts you kept using the Google fonts that are available inside Elementor or maybe another page builder can you get around that yes you can and it's a lot simpler than you think let's have a look I've got a basic page here with just a heading and a text editor now both of these are using the railway font but they are just using what you would have got available within Elemental if you haven't disabled Google fonts so there it is Railway it is not a custom font okay it's just one of the ones that you would get in your drop down and the same for the text editor I also just want to illustrate if I go to site settings and go to Global fonts in my primary as the family I've also selected Railway now you may also have gone and done it in the typography it doesn't really matter where you've done it as long as it's not inside like your theme or something like that because I mean I am you using hello by the way as well everything on here is still fetching from Google fonts okay and if you care about gdpr or the speed of your website or page speed Insight recommendations you just don't want that so how do you get around it if you've got Elemental Pro you'll have the custom fonts option available to you in the WordPress dashboard what you're going to do is go and add in your Railway font I'm going to call it Railway hit add font variation now I'm only going to add it in for the normal because that's all I've used on that test page but I hit upload and I've already got the fonte I do want to illustrate though you should only load through the fonts you're definitely using so if you're not going to have any bold or black or extra bold fonts on your website don't load them through I only load through what you need I recommend going for waft 2 because that is your compressed font if you really want to make a dent in that sizing once you've done that go and hit publish and there's the font it is now loaded by the way go and hit update if you've got any code Snippets as well that you can get from our website with regards to ensuring the web font loads you can jump but drop that in as well but normally doing just this is enough now if I go back to the page all I'm going to do is refresh it and if I now go to my header and go to the style and go to typography it says Railway but don't be fooled it is now the custom one and even if I type in Railway I will only see the custom one yeah I know you can see Railway dots but that's not the font I used it is now a custom font and the same with the text as well so as long as you pop it in even after you've done it it will push it over today and if you're a little bit unsure if I go over to my site settings and Global fonts as well look it's done it there as well so it'll do it in a typography setting as well if you've done it so even though you might have built your website with lots of different styles as long as you custom load them it's okay now what if you've got custom load for like uh four different font families are using that's fine just get them in and they'll all pay but there is one thing I do want to strongly highlight though what if at the time I loaded this through I went and gave it a new name like this I went and said Railway underscore custom or Railway custom let's just call it underscore customer for the sake of it right let's go and hit update you can still sell Railway so you're going to think well what's the problem actually there is a problem I now go over to style I now click this and it says Railway look it's now gone back to a Google font and if I scroll up my custom font is now Railway custom because I gave it a different name the naming you use here is so important don't start putting in fancy names just put the name of the font as nature and the world and the universe in 10 dead okay super important if you get that wrong you're gonna regret it so if you've got a website built and use lots of different font families make sure you know what you're using make sure you understand what the waiting was so do you do you need to have more than just normal oh we used bold right make sure you go and get the bolt variation Bolt the Bold variation in as well I hope that clarifies and helps some of you out because I did get asked this question about well what if my website's already built what do I do this should help you out hey I'm Imran web Squadron I hope you like subscribe share and follow and keep busting out websites see you soon [Music] [Music]

Channel: Web Squadron

Views: 6,648

Keywords: WebSquadron, Wordpress, Web, Web Design, Wordpress Tutorials, Web Squadron, #wordpress, wordpresstutorials, UK Web Design, UK Web Designers, Use Custom Fonts on Existing Website Build - Remove Google Font - Elementor Font Wordpress Tutorial, Update Custom Fonts, Custom Font, Wordpress Font, Google Font, Goolge Font v Custom Font, Page Speed Optimisation, Webfotn, Woff2, Elementor Font, Elementor Custom Font, elementor custom fonts, Woff2 Font, Fonts, WP Font, Elementor Pro

Id: LTHnz6KRNPo

Length: 4min 49sec (289 seconds)

Published: Thu May 25 2023