Do you know how to use global fonts in Elementor ?

In addition to Global Colors, another useful feature offered by Elementor  is Global Fonts. The goal of these new features is to streamline your workflow. If you use the same global element (color or font) on multiple pages and want to change it (the element), the change will be applied to all pages where it is used.

See also: How to install Elementor on WordPress 

In the previous article, we covered the use of global colors, so in this article we will show you how to use global fonts.

Same as color, font is also a crucial element in web design. It can represent the brand identity of a Website. The font selection process is also quite tricky, as is the color.

It's a very common thing to see website owners or web designers change the font of their Website. With global fontsElementor, you can change the font of your Website on several pages at once.

How to use Global Fonts in Elementor

To make it easy to understand, let's take a look at the sample page below.

The sample page above has three main text components: Title, Subtitle, and Body. Suppose you have several pages on your website that have the same structure. If you change the typography of a certain component (which you have used on multiple pages), the change will be applied to all pages on which the associated component is used.

Take a look at the screenshot below.

How to use global fonts in Elementor

Both headline texts in the screenshot above use the same overall font. So when we change the typography settings through the Global Settings panel, both will change as they use the same global font.

Using Global Fonts

Just like Global Colors, you can also access Google Fonts via Elementor's global settings panel. To access this panel, edit a page/template with Elementor. Click the hamburger icon in the upper left corner and select Site settings.

Click on Global fonts to open it.

How to use global fonts in Elementor

There are 4 predefined global fonts offered by Elementor. You can change them to change the font family, font size, font style, etc… depending on the style you want. Just click the pencil icon on each global font to make the change.

To add a new global font, you can click on the button ADD A STYLE. You can then set the font family, font size, etc ... via the editor panel that appears. To make it easy for you to identify your global font, you can also give it a name.

Repeat the above steps to add more global fonts. You can then click on the blue button UPDATE to apply the changes.

Read also: How to create a registration page in Elementor

To use a global font, add (or edit) a widget that has typography settings (such as Title widget, Text Editor widget, Button widget, etc.). Set typography from tab Style as usual. In the option Typography, click on the globe icon and select a global font you want to use.

How to use global fonts in Elementor

If you want to change a global font that you have used on some pages, you can simply open Global Fonts through the Global settings panel as we covered above.

Get Elementor Pro Now!

Conclusion

Here is ! That's it for this article which shows you how to use global fonts in Elementor. If you have any concerns on how to get there flet us know in the Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...