How do you add a new font to Elementor?

Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on email
QuestionsHow do you add a new font to Elementor?
Adam @ WPCrafter Staff asked 2 years ago

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

4 Answers
Adam @ WPCrafter Staff answered 2 years 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 );


replied 2 years 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 2 years ago

I’ll have to ask Elementor for a solution.

replied 2 years 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 2 years ago

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

yuya sato
answered 9 months ago

Following your tutorial above, i\'ve tried to put Japanese custom fonts into elementor.
the Japanese custom fonts i\'ve put can appear in elementor setting portal like the attaced picture, but 
they it does not reflect live review or actual website.
Can you kindly let me know what is an technical issue ?

yuya sato
answered 9 months ago