# 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.

- Type: PHP
- Runs: Run everywhere
- Category: [Page Builders & Themes](https://wpide.com/library/category/page-builders/)
- Tags: beaver-builder, fonts, typography
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/beaver-builder-system-fonts/

## Code

```php
// 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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Add Your Own Fonts to Beaver Builder" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/