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.
Opens WPIDE on
Code
// 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 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.