In addition to Global Colors, another useful feature offered by Elementor 3.0 is Global Fonts. The purpose of these new features is to streamline your workflow. If you use the same global item (color or font) on multiple pages and want to change it (the item), the change will be applied to all pages where it is being used. In the previous article, we have covered how to use 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 process of font selection is also tricky enough just like color. It’s a very common thing to see site owners or web designers change the font of their website. With the Elementor Global Fonts, you can change the font of your website on multiple pages at once. Complete with the settings such as font size, font family, font style, and so on.
How to use Global Fonts in Elementor
To make it easy to be understood, let’s take a look at the page example below.
The page example above has three main text components: heading, subheading, and body. Say you have several pages on your site that have the same structure. If you change the typography of a certain component (which you have used on several pages), the change will be applied to all pages where the associated component is used on. Take a look at the screencast below.
The two heading texts on the screencast above use the same global font. So, when we change the typography settings via the Global Settings panel, the two will change as they use the same global font.
Using Global Fonts
Just like Global Colors, you can also access Google Fonts via the Elementor Global Settings panel. To access this panel, edit a page/template with Elementor. Click the hamburger icon on the top-left corner and select Site Settings.
Click Global Fonts to open it.
There are 4 predefined global fonts offered by Elementor. You can edit them to change the font family, font size, font style, and so on according to the styling you want to accomplish. Simply click the pencil icon on each global font to make the edit.
To add a new global font, you can click the ADD STYLE button. You can then set the font family, font size, and so on via the appearing editor panel. To make it easy for you to identify your global font, you can also give it a name.
Repeat the steps above to add more global fonts. You can click the blue UPDATE button to apply the changes.
To use a global font, add (or edit) a widget that has typography settings (such as the Heading widget, the Text Editor widget, the Button widget, and so on). Set the typography from the Style tab just like usual. On the Typography option, click the globe icon and select a global you want to use.
If you want to change a global font you have used on some pages, you can simply open Global Fonts via the Global Settings panel as we have covered above.