WarpConduit Computing

  • Quick Tips
  • Web Development
  • WordPress Plugins
  • Home
  • Passphrase Generator
  • Password Generator
  • About
  • Contact

Adding Custom Fonts to the Beaver Builder Child Theme Customizer

February 15, 2016 by Josh Hartman

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.

Filed Under: Web Development Tagged With: beaver builder, customize, font, theme, wordpress

Comments

  1. Pam Blizzard says

    August 19, 2016 at 7:54 AM

    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

      August 19, 2016 at 4:00 PM

      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

    September 22, 2016 at 3:29 PM

    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

      September 22, 2016 at 9:24 PM

      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

        September 23, 2016 at 5:53 PM

        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

    November 16, 2016 at 7:05 PM

    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

    • Josh Hartman says

      November 24, 2016 at 11:24 AM

      Looks like the HTML entities have struck again. Code is fixed again but please watch out for these when copy/pasting the code.

  4. Hugues Audouard says

    November 22, 2016 at 7:16 AM

    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

      November 24, 2016 at 12:37 PM

      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.

  5. piet wolthaar says

    November 24, 2016 at 9:38 AM

    Hello i try to do this, but when i save i get the 500 error (HTTP ERROR 500)
    can you help ?

    • Josh Hartman says

      November 24, 2016 at 11:19 AM

      Most likely you have a PHP error behind the HTTP error. Check your PHP error log file or temporarily enable debugging in WordPress to find out what the error is.

      • Josh Hartman says

        November 24, 2016 at 11:25 AM

        Looks like the HTML entities have struck again. Code is fixed again but please watch out for these when copy/pasting the code.

        • piet wolthaar says

          November 25, 2016 at 8:24 AM

          Thanx for your reply, and help, it works now.

  6. nikoline says

    January 18, 2017 at 1:54 AM

    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.

  7. piet wolthaar says

    January 19, 2017 at 3:51 AM

    there is also an update of beaver builder, i will test today.

    • Josh Hartman says

      August 3, 2017 at 7:16 PM

      At the time of this comment, I can verify that this solution still works with the latest version of Beaver Builder (v1.10.6.5).

  8. Robin says

    August 3, 2017 at 1:26 PM

    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!

    • Robin says

      August 3, 2017 at 2:38 PM

      Forgot to check the notify box.

    • Josh Hartman says

      August 3, 2017 at 7:32 PM

      Robin, there are currently no settings in Beaver Builder (besides the italics button in the WP text editor) to specify the font-style. You’ll have to do that with a CSS class. So even if you fix your syntax errors Beaver Builder will simply ignore your added styles array.

      • Robin says

        August 4, 2017 at 12:15 PM

        Thanks for the clarification!

Connect

  • Facebook
  • GitHub
  • RSS
  • Twitter
  • YouTube

Recent Posts

  • How to Permanently Remove the “Learn about this picture” Spotlight Wallpaper Icon From Your Windows Desktop
  • How to Quickly Test a Fax Machine
  • Extremely Useful Applications for Web Development and IT Tasks

Tags

automatic benchmark bigint class composer css embed escape event font function gzip helper htaccess html htmlspecialchars image increment javascript jquery list magento media mysql number observer opencart order output photo php profiling random redirect rijndael software text type ubuntu url windows windows 7 wordpress xampp xss

Blogroll

  • CodeIgniter
  • Fusion Forward
  • jQuery
  • Nettuts+
  • Smashing Magazine

© 2025 WarpConduit Computing. All Rights Reserved.