How to Add Web Fonts to Beaver Builder Plugin and Theme

You can add other fonts to Beaver Builder Plugin modules such as the heading module etc by first enqueuing the fonts and then using a filter to add them for the font selection of the plugin modules.

Add-fonts-to-beaver-builder

Before you do this you need to enqueue the fonts so the plugin can recognise them which you do via wp_enqueue_scripts 

Get your web fonts ready for usage, there are many font generators online font squirrel being one but one I am using more is Transfonter, file your fonts and CSS style sheet in your theme folder.

webfonts-beaver-builder

 

Then add in via enqueuing…

<?php //<~ don't add me
add_action( 'wp_enqueue_scripts', 'prefix_scripts_styles', 997 ); // All the rest load before.
function prefix_scripts_styles() {
wp_enqueue_style( 'webfonts' , get_stylesheet_directory_uri() . '/webfonts/stylesheet.css', array() , '1.0.0', 'all' );
}
view raw enqueue.php hosted with ❤ by GitHub

Once enqueued add for the Beaver Builder modules in via fl_builder_font_families_system filter…

<?php //<~ don't add me
add_filter( 'fl_builder_font_families_system', 'me_added_fonts_builder' );
function me_added_fonts_builder( $system ) {
$system[ 'Neutra Text Book' ] = array(
"fallback" => "Geogia, serif",
"weights" => array(
"400",
)
);
$system[ 'Neutra Text Demi' ] = array(
"fallback" => "Geogia, serif",
"weights" => array(
"500",
"600",
"900",
)
);
return $system;
}
view raw fonts.php hosted with ❤ by GitHub

Just repeat the formatting as above for multiple fonts, add your fallbacks comma separated – and add or remove the different weights.

If you also wanted to add these custom web fonts to the Beaver Builder theme you can use the same function and a theme filter…

add_filter( 'fl_theme_system_fonts', 'me_added_fonts_builder' );

Leave a Comment