Add Your Own Fonts to Beaver Builder
Adds self-hosted or theme fonts to Beaver Builder's font list, with their fallback stack and available weights, so editors can select them in any module.
Opens WPIDE on
Code
// Font name => fallback stack and weights.
$wpide_bb_fonts = array(
'Inter' => array( 'fallback' => 'system-ui, sans-serif', 'weights' => array( '400', '600', '700' ) ),
'Source Serif 4' => array( 'fallback' => 'Georgia, serif', 'weights' => array( '400', '700' ) ),
);
add_filter( 'fl_builder_font_families_system', function ( $fonts ) use ( $wpide_bb_fonts ) {
return array_merge( (array) $fonts, $wpide_bb_fonts );
} );Notes
This adds the names to the list; load the font files yourself with @font-face or your theme.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.