QuestionsHow do you add a new font to Elementor?
Adam @ WPCrafter Staff asked 1 year ago

If I wanted to add my own custom fonts to Elementor page builder, how would I do that?

2 Answers
Adam @ WPCrafter Staff answered 1 year ago

There are 2 ways that I am aware of.

  1. Use this free plugin
  2. Use this custom function in your child theme
// For Elementor 1.7.10 and newer

$fonts = $controls_registry->get_control( 'font' )->get_settings( 'options' );

// Register here the custom font families

$controls_registry->get_control( 'font' )->set_settings( 'options', $new_fonts );


gjyu replied 1 year ago

This does not work for the Default Fonts drop down field of Elementor.

It’s located in:
1. Edit page with Elementor
2. Click top left on the hamburger icon (The 3 stacked ‘-‘ icon)
3. Click Default Font’s
4. Open ‘Primary Headline’ (or any of the other options)

Result: A font-family drop down is shown, however it does not contain the new font.

I think it’s because its a ‘group’ control.

I added the following code in functions.php below your fix to get some more details, however I’m unable to determine the array that needs to be extended for this.
Maybe you can help.

$typography_group = $controls_registry->get_control_groups(‘typography’);
var_dump( $typography_group );

$typography_fields = $typography_group->get_fields();
var_dump( $typography_fields[‘font_family’]);

$typography_options = $typography_group->get_options();
var_dump( $typography_options);

$scheme_fields_keys = $typography_group->get_scheme_fields_keys();
var_dump( $scheme_fields_keys);

Adam @ WPCrafter Staff replied 1 year ago

I’ll have to ask Elementor for a solution.

abaloo replied 1 year ago

Hi Adam, I hope you can help on this and thanks for your time.

I need to load Typekit fonts into Elementor for selection. Ise Any Font plugin doesn’t seem to allow loading of fonts from Typekit, is that correct?

I’ve tried the code you mention in the second option here, and though the Typekit font name appears in Elementor to select, it has no effect as I don’t know how to reference where the fonts are (i.e. on Typekit).

Thanks again for reading, and hope you can help. I’m tearing my hair out, amazed that Elementor doesn’t support Typekit fonts.

Best wishes,

Adam @ WPCrafter Staff answered 1 year ago

Great news, now there is a super simple way to add custom fonts to Elementor and Typekit fonts to Elementor.

Your Answer
3 + 8 =

Accepted file types: png, jpg, pdf

Add another file