Skip to content

[Feature request] Custom fonts loaded from a theme #4624

@black-eye

Description

@black-eye

Prerequisites

  • I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
  • The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

What problem is your feature request going to solve? Please describe.
I believe that the best place to define theme fonts is in the theme. But If I do so, I'm unable to select these fonts from Elementor's Typography menu. This issue is mostly concerning self hosted fonts, but it has some consequences even when using Google Fonts (see below).

On the other hand, if I define my custom fonts in Elementor, they are not visible in my Theme Customizer. I'd have to define (and load) them twice, which is neither ellegant, nor effective.

Similar problem goes even with Google Fonts. Sometimes you need to select just some of the weights or styles, sometimes you need to select special encoding, so again, it's mostly better to let the theme to define the Google Fonts. In this case you can, of course, see the Google font in Elementor Typo, but when you select it, Elementor adds an extra Google Font call with the maximum settings available.

Describe the solution you'd like
The best solution would be to add an extra font group (e.g. "Theme Fonts"), where it would be only the name of the font and CSS font-family string. I'm not sure, maybe this is already doable by using some filter (e.g. elementor/fonts/additional_fonts), but in docs, there is no special info on how to do it.

And maybe it would be useful, to let the developer remove all the Google Fonts from the Typo menu completely and use only those defined by the theme (commonly a developer doesn't want to give users a chance to mess up with so many fonts).

Describe alternatives you've considered
I've tried to add self hosted custom font (using Elementor > Custom Fonts) and filled in just the name and weights and styles (without loading any files). It actually worked, but I'm not convinced, that it would work for all cases and I feel, it's more a hack than the intended way, how to use this feature.

I could also use a custom css class with the name of the font, but it's not that intuitive.
Additional context
Add any other context or screenshots about the feature request here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    type/developer-apiIndicates when a topic is related to the Developer API and Documentation.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions