How To Use Elementor’s Global Colors And Fonts For Your WordPress Website

Revamp your WordPress site outlook using Elementor’s global colors and fonts that come with the latest Elementor 3.0 exclusive design system features. You can now anytime customize the colors & fonts from one organized place. You can enrich the entire site outlook with a few clicks to engage your visitors more to your site. Let’s get to know in detail below!

Elementor's Global Colors and Fonts

How Does Elememtor’s Latest Design System Function?

With Elementor’s Global Colors and Fonts, you will get theme styles and settings. It will help you to change the entire website outlook from one organized place. Now you don’t have to roam around anywhere. Use this design system feature and configure the advanced changes. Once you have done, you can now visualize those changes on every Elementor elements.

You can style each of your website section and make the changes by using those colors and fonts. You don’t have to worry about using your preferred custom color or fonts anymore. Yet you want, you can revamp your website design globally with ease. That’s how this design system’s global features function.

Revamp Your WordPress Site Outlook Using Elementor’s Global Colors & Fonts

To get started, you need to head over to your Elementor editor → Site Settings. You will see the ‘Design System’ panel that consists of two options ‘Global Colors’ and ‘Global Fonts’. Now, follow the step by step guideline and configure your website colors and fonts below:

Elementor's Global Colors and Fonts

Change Your Entire Website Outlook With Global Colors

First, you have to click on the Global Colors section to make the changes as per your need below:

Step 1: Configure The In-Built Global Color

Elementor’s Global Colors come with four in-built sections primary, secondary, text, and accent. You can make the changes the way you want and configure them in advance. 

Elementor's Global Colors and Fonts

Step 2: Customize Your Global Color Section

Even if you want, you can add more colors to it by clicking on the ‘Add Color’ option. It will help to get and use any unique color that you are looking for to change your website design. 

Elementor's Global Colors and Fonts

This color feature will add to your Elementor each element and over the layout style section. You can use these colors to change any of your website sections button, header, or others. Also, can maintain your website color consistency with ease.

Elementor's Global Colors and Fonts

Manage Your Whole Website Content Fonts With Global Fonts

Let’s now set up the Elementor’s Global Fonts by following the simple instructions:

Step 1: Setup The In-Built Global Fonts

You have to first go to the Global Fonts section to configure the in-built font styles as per your need. Besides, the ‘Fallback Font Family’ option will work only if any of your fonts not work or faced any issues.

Elementor's Global Colors and Fonts

Step 3: Add New Global Fonts & Style It

You can also add new Elementor’s Global Fonts and styles it in advance by using the ‘Add Style’ section. Click on it, add your preferred font, and configure the style feature and make it your own. 

Elementor's Global Colors and Fonts

You can add as many styles you want to add. All these changes will be available on Elementor each element Style →Typography section. You have to pick your preferred one and change your entire website font design with ease.

Elementor's Global Colors and Fonts

Wrapping Up

You don’t have to add a single line of codes now to change and style your website colors and fonts. Using Elementor’s global colors and fonts of the design system, you can fulfill your desire, and change the outlook of your website with a few clicks. 

We hope you will find this blog helpful, and if you want, you can share your experience by commenting below. Also, you can join our Facebook Community to get connected with WordPress experts.   

Picture of afrin


Afrin is an Engineer in the meantime works as a Digital Marketer. She believes "nothing is impossible", if you have faith in Almighty, recognize your own ability and try hard to achieve your goal.

Share This Story