WPCrafter Community

Find answers, ask questions, and connect with our
WordPress community around the world.

Home Community General Questions How do you add a new font to Elementor?

  • How do you add a new font to Elementor?

     gjyu updated 11 months, 1 week ago 3 Members · 8 Posts
  • Adam

    Administrator
    Nov 13, 2017 at 9:45 am

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

  • Adam

    Administrator
    Nov 13, 2017 at 9:50 am

    There are 2 ways that I am aware of.

    1. Use this free plugin https://wordpress.org/plugins/use-any-font/
    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 );

     

    • abaloo

      Member
      Dec 7, 2017 at 4:17 am

      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,
      Andrew.

    • Adam

      Administrator
      Dec 8, 2017 at 2:28 pm

      I'll have to ask Elementor for a solution.

    • gjyu

      Member
      Feb 13, 2018 at 3:03 am

      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

    Administrator
    Feb 28, 2018 at 11:19 am

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

  • Anonymous

    Guest
    Mar 26, 2019 at 6:23 pm

    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 ?
     

  • Anonymous

    Guest
    Mar 26, 2019 at 6:27 pm

    1

Log in to reply.

Original Post
0 of 0 posts June 2018
Now

Stay Up To Date

Enter your name and email for the lates news, updates, and tutorials.