Add System Font Stack to Customiser Preset in Beaver Builder Theme & Plugin

September 4, 2017 -

A system font stack is a series of fonts that are native to Apple, Windows and Linux desktop and mobile operating systems, they are inbuilt so are fast to load and provide a relatively comfortable and consistent display across different mediums.

Beaver Theme 1.6.2 has added some additional filters that allow extra fonts to be available for selection in the Customizer on top of what already exists for both system and Google based fonts..

The filter I am using here is fl_theme_system_fonts and this is the font stack (similar to GiHub) I am adding in to the Customizer is : -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen-Sans, Ubuntu, Cantarell, ‘Helvetica Neue’, sans-serif

Use the filter like so below, which is added to your functions.php file

add_filter( 'fl_theme_system_fonts', 'bt_added_fonts' );
function bt_added_fonts( $system ) {
    $system[ '-apple-system' ] = array(
			"fallback" => "BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",			
            "weights"  => array(
                "300",
                "400",
                "700",
            )
    );
    return $system;
}

Now the font stack will be available in the customizer panel General > Text & Headings section as well as the Heading > Nav Style > Font Family

You can select it for the body or all the heading sizes and also the menu font. It’s great for a starter theme and provides a good solution for type when no specific fonts are required.

Add Fonts to the Beaver Builder Plugin

To also add the font stack into the Beaver Builder Plugin itself for its modules there is a similar filter used in the same way… fl_builder_font_families_system

add_filter( 'fl_builder_font_families_system', 'bt_added_fonts_plugin' );
function bt_added_fonts_plugin( $system ) {
    $system[ '-apple-system' ] = array(
			"fallback" => "BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",			
            "weights"  => array(
                "300",
                "400",
		"700",
		"900"
            )
	);
	
    return $system;
}

Also add the above to functions.php and see the font available in the dropdowns.