# Add Your Own Font Names to Elementor's Font List

> Adds self-hosted or theme-loaded fonts to the typography font dropdown in Elementor, so editors can pick them without typing names.

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

## Code

```php
// Font family names as they appear in your CSS.
$wpide_el_font_names = array( 'Inter', 'Source Serif 4', 'JetBrains Mono' );

add_filter( 'elementor/fonts/additional_fonts', function ( $fonts ) use ( $wpide_el_font_names ) {
    foreach ( $wpide_el_font_names as $name ) {
        $fonts[ $name ] = 'system';
    }

    return $fonts;
} );
```

## Notes

This only adds the names; load the font files yourself (theme, Elementor Pro custom fonts or @font-face).

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Add Your Own Font Names to Elementor's Font List" 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/