How to Add Custom Fonts to Divi (The Right Way!)

hi it's Bella taper here today I'm going to show you how to add custom ponds to Libby or those new to DV it's in my opinion the best WordPress page builder available as it lets you customize your theme and page templates without touching any code well it does support Google Forms and in your own custom web fonts is more complicated and advice on the Internet can be somewhat confusing in this video I will go through a few different methods you can use and show you step by step what I think is the best way to go but Before we jump into my computer please subscribe to my channel and turn on the notifications so you will know when I post more videos like this let's look at the first method which is TV's built-in upload tool in order to access it open the DV page editor and ethics for any module that has text on it under the design tab find a section that has fun styling options under the font drop-down menu you will find an upload button within this pop-up you can create a custom font by uploading one file even though it says choose font files it doesn't actually let you upload more than one file at a time I'm not sure if this is intended to work like this or just a bug please let me know in the comments if you know whether the problem with this is that if you want to upload bold italic or other words you would have to name them as separate font families let's upload one anyway to show you how this works in here I have a custom font with different weights so I will just upload regular weight by dragging it here and we'll name it Bergen Suns and hit upload now that it has been uploaded I can select that font in the font drop-down menu it will also show up in the team customizer we reload this and navigate back to general settings typography I can see that we merely added font here here but we have the same problem with this one if if I want to change the rate let's change the body font in the Bergen Suns so all the bold and italic on this one it's forced by CSS and not using the custom piles that actually come with that font as far as I'm concerned this method is useless unless you just want to change this very specific thing like your heading style or add one of custom phone in the Builder for some reason the next method is using a DB child team uploading the font files by FTP and loading them inside your custom CSS file this way you can add multiple Weitz styles under the same font family the problem with this method is that they will not show up under your theme customizer and you will have to override any fonts manually using CSS most advice online tells you to do custom fonts this way so I'm not going to explain it any further what I am going to show you is a far better solution that also requires a child team but will actually get your phone showing up in the fonts list inside builder and team customizer you will need to add a little code to your child team's functions.php but I will leave a link below where you can copy and paste it in I will also leave a link a simple DB child team you can download and an online web font generator where you can simply upload your custom font for us and have it generate a web font kit with CSS file you can upload to your themes folder we are now inside my DB child theme folder where I've already uploaded my custom fonts into the web fonts folder inside functions.php just copy and paste the code snippet somewhere before the closing PHP tag I've already added one here I'm just going to remove the comments this line here is loading at the web fonts CSS files inside the folder you have uploaded so make sure you change that accordingly the next bit here is hooking into Debbie's function where the standard web fonts are added to the font drop-down what we doing here is creating a new array with our own web fonts and adding it in it with the standard fonts make sure you change the font name to match what you have in your kit CSS file and include the necessary weights and styles in this example we're adding two weights 400 for regular and 700 for bold and same with italic Styles if you want to add multiple fonts just add two items inside array like this and this other one would become your second font I'm having just one so let's remove that and save the file let's go back to the theme customizer reload it and navigate back to general settings typography and we should be seeing this newly added font in the drop down menu I can then change it to the body copy it shows up here let's do the same for headers but use the bold and that's it simple as that just publish the changes and a little tip if you are not going to use any google fonts in your team you can turn them off completely under TV theme options in here use google fonts just disable that that's what I've done here if you have Google Fonts enabled you would actually have to scroll down quite quite a bit because your custom font will appear after google fonts and before the standard web fonts in the drop down menu hope you enjoyed this video let me know your thoughts in the comments make sure the like subscribe hit the like and so you know when I post more content like this thanks for watching and I will see you next time bye bye

Channel: Ville Teikko

Views: 4,432

Keywords: divi custom fonts, divi builder, wordpress, elegant themes, divi theme, divi, webfonts wordpress, webfonts divi, divi font problem, divi upload fonts, wordpress page builder, page builder custom fonts, divi upload font, divi webfont, divi wordpress, divi tutorial, divi theme tutorial, elegant themes divi, elegant themes tutorial, divi theme builder, divi builder tutorial, divi builder for wordpress, wordpress tutorial

Id: hRzwmrXsNPA

Length: 6min 36sec (396 seconds)

Published: Tue Jun 09 2020