Host Google Fonts Locally in Divi

Тәжірибелік нұсқаулар және стиль

Local hosting of Google Fonts on your website can be a great way to improve your website’s performance and user experience. When you use Google Fonts, the actual font file is hosted on Google’s server, which can slow down your website and negatively impact user experience. By hosting the font files locally, you can avoid this issue and ensure that your website loads quickly and smoothly.
If you’re using Divi, there are several benefits to hosting Google Fonts locally. First, it can help you reduce the number of external domains your website is depending on, which can improve your website’s performance. Second, it gives you full control over caching, which can help you optimize your website’s performance even further. Third, it eliminates the need to rely on third-party services, which can be unreliable and slow.
When you host Google Fonts locally, you can also enjoy greater flexibility and customization options. For example, you can choose which fonts to use and how to use them, rather than relying on Google’s pre-defined options. You can also customize the fonts to match your website’s branding and design, which can help you create a more cohesive and professional look.
Overall, hosting Google Fonts locally can be a great way to improve your website’s performance, user experience, and customization options. If you’re using Divi, it’s definitely worth considering. I hope this helps! 😊
Search for "Google Webfonts Helper" to find the site to download your fonts.
/*
PHP. Add this in your CHILD THEME
functions.php after the existing content.
Backup first!
*/
add_filter( 'wp_check_filetype_and_ext', 'my_file_and_ext_woff', 10, 4 );
function my_file_and_ext_woff( $types, $file, $filename, $mimes ) {
if ( false !== strpos( $filename, '.woff' ) ) {
$types['ext'] = 'woff';
$types['type'] = 'font/woff|application/font-woff|application/x-font-woff|application/octet-stream';
}
if ( false !== strpos( $filename, '.woff2' ) ) {
$types['ext'] = 'woff2';
$types['type'] = 'font/woff2|application/octet-stream|font/x-woff2';
}
return $types;
}
/* Mime Types Support */
add_filter('upload_mimes', 'custom_mime_types', 999999);
function custom_mime_types($mimes) {
$mimes['woff'] = 'application/font-woff';
$mimes['woff2'] = 'application/font-woff2';
return $mimes;
}
/* Custom Font Types Support */
add_filter('et_pb_supported_font_formats', 'custom_font_formats', 1);
function custom_font_formats() {
return array('woff', 'woff2');
}
// End
00:00 Introduction
00:51 Default Setting
01:28 Disable Google Fonts
02:01 Chooing Your Fonts
03:37 Downloading Your Fonts
05:57 Extracting Files
06:45 Installing To Divi
08:22 Editing functions.php
09:48 Uploading The Fonts
11:34 Setting Default Fonts

Пікірлер: 40

  • @kitchnrecordz1400
    @kitchnrecordz14004 ай бұрын

    Fantastic video. Easy to follow along. Thanks heaps and hope to see more useful Divi tutorials.

  • @divicoaching

    @divicoaching

    4 ай бұрын

    Thank you! Yes. More coming...

  • @GaryBartanus
    @GaryBartanus3 ай бұрын

    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!

  • @divicoaching

    @divicoaching

    2 ай бұрын

    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!

  • @susan5869
    @susan58696 ай бұрын

    Brilliant! Straight forward and resolve all the issues. Thank you.

  • @divicoaching

    @divicoaching

    6 ай бұрын

    Thank you. I found this frustrating myself and spent some time working out the best way.

  • @darndarn99
    @darndarn996 ай бұрын

    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

  • @divicoaching

    @divicoaching

    6 ай бұрын

    Many thanks! I share your dislike of too many, or non-essential plugins.

  • @naomiroper4038
    @naomiroper40386 ай бұрын

    This is so helpful, thank you so much!

  • @divicoaching

    @divicoaching

    6 ай бұрын

    Thank you! Always great to have feedback!

  • @naomiroper4038

    @naomiroper4038

    6 ай бұрын

    @@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.

  • @divicoaching

    @divicoaching

    6 ай бұрын

    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?

  • @naomiroper4038

    @naomiroper4038

    6 ай бұрын

    @@divicoaching not yet. I sent you an email with the site URL and further info. Hoping you can help!

  • @divicoaching

    @divicoaching

    6 ай бұрын

    Ok will take a look.

  • @karl-ford
    @karl-ford8 ай бұрын

    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?

  • @divicoaching

    @divicoaching

    8 ай бұрын

    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?

  • @kristinbowl4240
    @kristinbowl42403 ай бұрын

    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

    @divicoaching

    3 ай бұрын

    At a guess I would say a browser cache. Try opening an "incognito" tab. Do they show in that?

  • @kristinbowl4240

    @kristinbowl4240

    3 ай бұрын

    @@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

    @divicoaching

    3 ай бұрын

    Are you able to share a URL?

  • @kristinbowl4240

    @kristinbowl4240

    3 ай бұрын

    @@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.

  • @jaroslavkrizka9882
    @jaroslavkrizka98826 ай бұрын

    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.

  • @divicoaching

    @divicoaching

    6 ай бұрын

    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.

  • @floyd1411
    @floyd14117 ай бұрын

    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

  • @divicoaching

    @divicoaching

    7 ай бұрын

    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?

  • @floyd1411

    @floyd1411

    7 ай бұрын

    @@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. 🙃

  • @8788Studio
    @8788Studio5 ай бұрын

    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

    @divicoaching

    5 ай бұрын

    I've not seen that problem. Which font family were you trying to upload?

  • @8788Studio

    @8788Studio

    5 ай бұрын

    @@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. :((

  • @divicoaching

    @divicoaching

    5 ай бұрын

    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.

  • @8788Studio

    @8788Studio

    5 ай бұрын

    @@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.

  • @divicoaching

    @divicoaching

    5 ай бұрын

    Ok, I will have an investigate!

  • @helenewurtzknudsen5563
    @helenewurtzknudsen5563Ай бұрын

    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?

  • @divicoaching

    @divicoaching

    Ай бұрын

    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.

  • @helenewurtzknudsen5563

    @helenewurtzknudsen5563

    Ай бұрын

    @@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....

Келесі