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.

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.

Theme Customizer

Page Builder

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