Thank you for this clear and concise tutorial on a topic that is so important! I've been trying to learn how to do this for years, but all the other tutorials I've seen are overly complicated and intimidating. Some of them even involve using JavaScript, which seems, at best, unnecessary. (All those guru-punks who try to dazzle us with their BS are such a waste of time.) Thank you again! I'll be trying this out as soon as possible!
Thank you for your kind words. Some people have said they have issues with multiple weights/styles and you may need play around a bit and upload fonts one at a time. I've been able to get it working with no issues but the whole Divi/WP/hosting environment has a lot of variables and is fluid by nature so a bit of trial and error might be needed!
Fantastic tutorial 👍 been wanting to do this for a while now and your video is gold!! Never seen this done like this as most out there say to use a plugin, which I dislike a lot ! Hate non essential plugins. This was perfect
Excellent! There were different methods over the years, but yours is the best since it only modifies the child theme. Thank you sir! Edit: Should I delete the code after uploading all the fonts I need?
Hi - Thanks sooo much for your great videos with such complete and easy to understand content. I followed all your instructions, including downloading your new child theme template. But, my new fonts only show when I am in the Divi Builder. Once I click "exit", they don't show. Anything jump out at you regarding what might be wrong?
@@divicoaching Doesn't show in the incognito window. I also did the Safe Mode and turned off all the plugins, purged the cache on the site and still only shows when Enable Visual Builder.
@@divicoaching I wouldn't want to share it publicly because it's a DRAFT site I'm still working on. I just found your FB page though and send you the link through Messenger. You're kind to care about my specific issue and I realize you're not tech support. So, whenever you're done looking into it is fine. Thank you again.
@@divicoaching actually have run into an issue, I add the php functions under what's already there in the child theme. But when I hit save it is adding a white block showing the code at the top of each page on the site...any ideas why this might be happening? I can't see that I've done anything different to what you say to do.
That is odd and a bit difficult to diagnose with out seeing what other code is in the file. Sounds like a syntax thing, missing brace or something? Did you restore the functions.php and get everything working?
Hi. This is basically just making a Divi website I think? Just go steady and cut/paste content building the structure as you go. Do you have a site in mind?
@@divicoaching hiya. So to give some context to the question to begin with. I have been playing around with webflow and there is an option to export the code. Which basically makes it into an html, css and js template. And then I learnt of child themes and divi do have a lot of tutorials on how to make a child theme but very basic where there is only style.css and functions.php. so I was wondering how could I take an already created html template and add that to a divi child theme. Warning: I am a certified noob and may have not explained that very well. 🙃
Hi, the tutorial is good and great but I when uploading woff2 file, divi only register 1 file, so I could not get all the font weight work. Do you have a solution for this?
@@divicoaching Thank you for your quick response. I were trying to use Raleway. I noticed that in your video at 10:08 when you choose 3 ubuntu woff2 files, the builder only show 1, which is the regular. I have the same issue, it only takes 1 file. So when you upload that file and try it on Divi builder you can only get 2 font weights which is that one, and the bold version of it. Other font weight won't show up. I'm using the latest version of Divi. :((
Ok so I think you'll find the weights are there, but not selectable from the weight drop-down as this is coded to associate a weight with a label - 400 Regular etc. If you add font-weight:100 for example in custom CSS for a paragraph this will allow you to select the other weights not listed.
@@divicoaching I downloaded 4 font weights of Raleway, 300, 400, 500, 600. And only 1 of these are applicable. I tried hold command key to highlight all 4 and select, results only 1 is registered. I then try 1 by 1, I choose 300 first, then click again to choose 400, and 400 replaced 300. No matter what, the upload font only have 2 font weights that works: the one show up in divi builder 10:08 and its bold weight. The other weights shows up in the drop down, but again, only 2 weights show, if I choose light, regular, it show regular weight; if I choose semi bold, bold, black, it shows the same bold weight. So I'm sure in your case, if you enable divi builder and tried to edit a text with ubuntu or lato, regardless of how many options in the weight drop down, you can only see 2 weights that works.
Thank you for at very easy to follow tutorial on hosting Google fonts in Divi.... I believe I carefully followed the instructions - but the font only shows when logged in - and in the visual builder, so maybe something wasn't right at all.. 😅. Any thoughts as to what went wrong?
If it is showing correctly in the builder but not after logging out then possibly a caching issue. Does it work if you visit the page with an “incognito” or “private” browser session? If that displays ok then it’s a browser cache issue but if not then see if you have caching enabled on the server and if so clear this. Also in the builder go to divi settings and under builder click to clear the static cache.
@@divicoaching Thank you very much for repaying to my comment. I have now tried visiting the site from a private browser, clearing cache in browser and in the Divi builder - and my hosting service has no cache on the webserver. Still no luck. I only see the correct font (Reddit) when I have enabled the visual builder....
Thank you for this clear and concise tutorial on a topic that is so important! I've been trying to learn how to do this for years, but all the other tutorials I've seen are overly complicated and intimidating. Some of them even involve using JavaScript, which seems, at best, unnecessary. (All those guru-punks who try to dazzle us with their BS are such a waste of time.) Thank you again! I'll be trying this out as soon as possible!
Thank you for your kind words. Some people have said they have issues with multiple weights/styles and you may need play around a bit and upload fonts one at a time. I've been able to get it working with no issues but the whole Divi/WP/hosting environment has a lot of variables and is fluid by nature so a bit of trial and error might be needed!
Fantastic video. Easy to follow along. Thanks heaps and hope to see more useful Divi tutorials.
Thank you! Yes. More coming...
Fantastic tutorial 👍 been wanting to do this for a while now and your video is gold!! Never seen this done like this as most out there say to use a plugin, which I dislike a lot ! Hate non essential plugins. This was perfect
Many thanks! I share your dislike of too many, or non-essential plugins.
Brilliant! Straight forward and resolve all the issues. Thank you.
Thank you. I found this frustrating myself and spent some time working out the best way.
Thank you very much for this detailed video! Do we need to remove the code from functions.php after inserting the font files?
I would just comment out that section with a /* comment */ but you could remove it
Excellent! There were different methods over the years, but yours is the best since it only modifies the child theme. Thank you sir!
Edit: Should I delete the code after uploading all the fonts I need?
Hi Karl. That wouldn't be a bad idea. All depends on who else.will be working on the site. Maybe just comment it out?
Hi - Thanks sooo much for your great videos with such complete and easy to understand content. I followed all your instructions, including downloading your new child theme template. But, my new fonts only show when I am in the Divi Builder. Once I click "exit", they don't show. Anything jump out at you regarding what might be wrong?
At a guess I would say a browser cache. Try opening an "incognito" tab. Do they show in that?
@@divicoaching Doesn't show in the incognito window. I also did the Safe Mode and turned off all the plugins, purged the cache on the site and still only shows when Enable Visual Builder.
Are you able to share a URL?
@@divicoaching I wouldn't want to share it publicly because it's a DRAFT site I'm still working on. I just found your FB page though and send you the link through Messenger. You're kind to care about my specific issue and I realize you're not tech support. So, whenever you're done looking into it is fine. Thank you again.
This is so helpful, thank you so much!
Thank you! Always great to have feedback!
@@divicoaching actually have run into an issue, I add the php functions under what's already there in the child theme. But when I hit save it is adding a white block showing the code at the top of each page on the site...any ideas why this might be happening? I can't see that I've done anything different to what you say to do.
That is odd and a bit difficult to diagnose with out seeing what other code is in the file. Sounds like a syntax thing, missing brace or something? Did you restore the functions.php and get everything working?
@@divicoaching not yet. I sent you an email with the site URL and further info. Hoping you can help!
Ok will take a look.
Hello, I can't find a tutorial video for changing the local font when I'm not using a child template. You refer to it in this tutorial. Thank you.
If you are not using a child theme then rather than using the WOFF2 version of the font use .ttf or .otf these will work.
Hiya, I was swondering if you could do a tutorial of taking an HTML CSS JS Website and converting that into a Divi Child theme
Hi. This is basically just making a Divi website I think? Just go steady and cut/paste content building the structure as you go. Do you have a site in mind?
@@divicoaching hiya. So to give some context to the question to begin with. I have been playing around with webflow and there is an option to export the code. Which basically makes it into an html, css and js template. And then I learnt of child themes and divi do have a lot of tutorials on how to make a child theme but very basic where there is only style.css and functions.php. so I was wondering how could I take an already created html template and add that to a divi child theme.
Warning: I am a certified noob and may have not explained that very well. 🙃
Hi, the tutorial is good and great but I when uploading woff2 file, divi only register 1 file, so I could not get all the font weight work. Do you have a solution for this?
I've not seen that problem. Which font family were you trying to upload?
@@divicoaching Thank you for your quick response. I were trying to use Raleway. I noticed that in your video at 10:08 when you choose 3 ubuntu woff2 files, the builder only show 1, which is the regular. I have the same issue, it only takes 1 file. So when you upload that file and try it on Divi builder you can only get 2 font weights which is that one, and the bold version of it. Other font weight won't show up. I'm using the latest version of Divi. :((
Ok so I think you'll find the weights are there, but not selectable from the weight drop-down as this is coded to associate a weight with a label - 400 Regular etc. If you add font-weight:100 for example in custom CSS for a paragraph this will allow you to select the other weights not listed.
@@divicoaching I downloaded 4 font weights of Raleway, 300, 400, 500, 600. And only 1 of these are applicable. I tried hold command key to highlight all 4 and select, results only 1 is registered. I then try 1 by 1, I choose 300 first, then click again to choose 400, and 400 replaced 300. No matter what, the upload font only have 2 font weights that works: the one show up in divi builder 10:08 and its bold weight. The other weights shows up in the drop down, but again, only 2 weights show, if I choose light, regular, it show regular weight; if I choose semi bold, bold, black, it shows the same bold weight. So I'm sure in your case, if you enable divi builder and tried to edit a text with ubuntu or lato, regardless of how many options in the weight drop down, you can only see 2 weights that works.
Ok, I will have an investigate!
Thank you for at very easy to follow tutorial on hosting Google fonts in Divi.... I believe I carefully followed the instructions - but the font only shows when logged in - and in the visual builder, so maybe something wasn't right at all.. 😅. Any thoughts as to what went wrong?
If it is showing correctly in the builder but not after logging out then possibly a caching issue. Does it work if you visit the page with an “incognito” or “private” browser session? If that displays ok then it’s a browser cache issue but if not then see if you have caching enabled on the server and if so clear this. Also in the builder go to divi settings and under builder click to clear the static cache.
@@divicoaching Thank you very much for repaying to my comment. I have now tried visiting the site from a private browser, clearing cache in browser and in the Divi builder - and my hosting service has no cache on the webserver. Still no luck. I only see the correct font (Reddit) when I have enabled the visual builder....