WarpConduit Computing

Adding Custom Fonts to the Beaver Builder Child Theme Customizer

by

Recently I was searching for an easy way for developers to add custom fonts to the Beaver Builder child theme customizer. Failing to find that, I have come up with a solution that does not modify the core Beaver Builder theme files and only requires a minimal amount code.

Step 1: Load Your Font

You have a few options and the method will depend on your font source. Perhaps it is a kit from Typekit or Edge Web Fonts loaded via JavaScript. In that case you can add the code through Customize … Code > Head Code.

bb-customize-head-code

Alternatively, you could enqueue the embed code through the child theme’s functions.php file, it’s entirely up to you.

Some other methods include uploading your custom CSS font files to your child theme’s directory or using a remote @import URL. Either way you’ll need to edit your child theme’s style.css file and load the font from there.

Important Note: Currently, the Beaver Builder theme code doesn’t quote the font name in the generated CSS so for sure font names with commas will fail and you’re mileage may vary with fonts that include spaces or special characters. I have found that at least fonts with single spaces should work in all modern browsers without quotes.

Once you have your font loaded and can verify that in your site’s source code you can move on.

Step 2: Add Your Font to the Theme Customizer Font List

Edit your child theme’s functions.php file and add the following, making sure to replace acumin-pro-extra-condensed with your custom font name and adjusting the fallback string and weights array as needed. You can add multiple custom fonts to the $custom_fonts array, just follow the same format as the first.

add_action( 'init', 'customize_font_list' );
function customize_font_list(){

    $custom_fonts = array(
        'acumin-pro-extra-condensed' => array(
            'fallback' => 'Arial, sans-serif',
            'weights' => array(
                '400',
                '700'
            )
        )
    );

    foreach($custom_fonts as $name => $settings){
        // Add to Theme Customizer
        if(class_exists('FLFontFamilies') && isset(FLFontFamilies::$system)){
            FLFontFamilies::$system[$name] = $settings;
        }

        // Add to Page Builder
        if(class_exists('FLBuilderFontFamilies') && isset(FLBuilderFontFamilies::$system)){
            FLBuilderFontFamilies::$system[$name] = $settings;
        }
    }
}

Step 3: Choose Your Font in the Theme Customizer or Page Builder

In the Theme Customizer navigate to a section with a Font Family dropdown such as General > Headings.

As long as your custom CSS font is loading and you have no errors in your PHP code you should now see your custom font name listed under the System group of the dropdown list.

bb-customize-headings

Theme Customizer

bb-page-builder-heading

Page Builder

Hope this technique is helpful to you, leave your comments and questions below.

Comments

  1. Pam Blizzard says

    So helpful, thank you so much! Here’s a question – can you add two fonts in the same block of code? For instance, a client’s style guide requires Bungee|Gravitas+One. Any guidance you can provide would be greatly appreciated!

    • Josh Hartman says

      You may have noticed this already, but Gravitas One is already included in the list of Google Fonts in Beaver Builder so you don’t need to custom load that one. It may just be a matter of time before they include Bungee in the list.

      Getting back to the initial question, for multiple fonts you add additional elements to the $custom_fonts array, example:

      
    $custom_fonts = array(
        'Gravitas One' => array(
            'fallback' => 'cursive',
            'weights' => array(
                '400'
            )
        ),
        'Bungee' => array(
            'fallback' => 'cursive',
            'weights' => array(
                '400'
            )
        )
    );

      And I have found that at least fonts with single spaces should work in all modern browsers.

  2. Andrea Arden says

    Thank you! This is really helpful.

    Can web fonts from MyFonts.com be added to Beaver Builder in the same way? My experience with their recommended method causes a significant page load delay for an otherwise swift loading site.

    • Josh Hartman says

      As long as you can get your web font loaded this works. I haven’t used MyFonts before but I had a look and see that they don’t host the web fonts for you. So It may be that your site slowed down because there were more assets to load from your own domain. I’m not sure which method you selected for the Webfonts kit (JavaScript or CSS) but the JavaScript method should be asynchronous, allowing the site to load faster.

      • Andrea Arden says

        Thank you very much for taking the time to research this issue! I am using the CSS method that requires links to the MyFonts license stored on their website to be added to the head.

        I’m not seeing an obvious slow down today, but when I did, the MyFonts.com URL stayed visible in the status bar for a second or so. Normally, that process should occur so quickly that the MyFonts.com URL isn’t seen at all. Seeing it made me think that accessing the license on their site was problematic, but the delay appears to be resolved for now at least.

        It’s very good to know that using JS is faster. I’m going to switch to that method from now on. Thanks again!

  3. Shinshugita says

    Hi Josh,

    Excellent post. Is it still working with the latest Beaver Builder plugin (1.8.8) and theme (1.5.3) ?

    I got this error :
    Parse error: syntax error, unexpected ‘=’, expecting ‘)’ in … even-though font is loaded.

    I use type-kit font for this scenario.

    I also did it by uploading custom font on my website then loaded it trough css but the same error occurred.

    Have you encounter this kind of issue or do you have any idea how to fix it?

    Thankyou in advance for your help

  4. Hugues Audouard says

    Thank you Josh, this is super helpful. 🙂
    I found your post in the BB legacy support forum.

    I have a client who’d like me to use a couple of fonts from typography dot com have you heard of them ?
    It doesn’t look like their “collections” allows for loading the fonts via javascript (as Typekit fonts would) instead their instructions are to load the font into the head section of each page using link rel

    And then delclare the fonts manually in the style sheet

    Do you know if there a way to make your solution work in this particular case ?
    Thanks in advance
    Hugues

    • Josh Hartman says

      I do not have experience with that site but go ahead and load the font however they want you to whether it is JavaScript or not. This custom code and Beaver Builder don’t care how you load it as long as the font becomes available through CSS. Note, it looks like some of their CSS font names have spaces and that could cause an issue.

  6. nikoline says

    Some of this doesnt work anymore …
    If i use the custom font inside appereance, it works.

    But if i choose another font for like H1 direcly on the page – it just switches to verdana.

  8. Robin says

    Hi, Josh:

    Thanks for this. Ever since I began using BB a year ago I have wondered about this functionality. I would also like to add italic and normal styles.

    I tried:

    'proxima-nova' => array(
            'fallback' => 'sans-serif',
            'weights' => array(
                '400',
                '700'
            )
            'styles' => array(
                'normal',
                'italic'
            )
        )

    But it threw an error: Parse error: syntax error, unexpected ‘;’, expecting ‘)’ in /home/scswpbui/public_html/wp-content/uploads/dynamik-gen/theme/custom-functions.php on line 27

    Admittedly, I am not a PHP Guru. I know it’s a syntax issue. Can you help?

    Thanks!