help center

On this page

Set global fonts and colors

Last Update: February 2, 2024
Screenshot of Site Settings and Global Colors menu.
Site Settings enables you to change Global Colors all at once!

Why should you use global fonts and colors?

When you’re building a website, your fonts and colors should be the same across your entire site to improve the overall look. If fonts and colors vary among pages or parts, your users can become confused. This can negatively impact user retention and may cost you sales. 

You can also use font and color continuity across your site to reinforce your brand and help users remember it. Font and color continuity helps keep your brand relevant and ensures customers will remember and come to you when they need a product or service. 

Elementor’s Global Fonts and Colors enable you to update your website fonts and colors from one convenient location. This prevents you from having to repeatedly open website parts and change them individually. In this article, you’ll learn how to do this. 

First, let’s look at how to access Global Settings.   

How do I access Global Settings? 

Once you login to Elementor, select Edit with Elementor on the site you want to update.

Screenshot of Elementor's Site Settings button in the Settings Menu.
Select Site Settings.

In Settings, select Site Settings.

Screenshot of the Site Settings menu showing Global Colors and Global Fonts.
Global Colors and Global Fonts are at the top of the Site Settings Menu.

You can now access either Global Fonts or Global Colors.

Note: If you change the Site Settings, doing so will affect all the same font or color used across your entire website. For example, if you switch the Primary Font Color from red to blue, all text labeled as Primary will become blue.   

How do I change Global Fonts and Colors?

There are four default groups of fonts and colors – Primary, Secondary, Text, and Accent. 

In the example below, we’ll modify all items labeled Primary on your site.

Change a global font: 

1. Click Global Fonts

2. Go to the font labeled Primary (it’s listed under System Fonts). 

3. Select the Pencil icon

4. Change attributes in the Typography menu. 

5. Close the menu.

Screenshot of the Typography menu.
Use the Typography menu to change the attributes of your Global Fonts & Colors!

Change a global color:

1. Click Global Colors

2. Go to a font label called Primary (it’s listed under System Colors).  

3. Click the color swatch to open the Color Picker

4. Select the color you want from the Color Picker. 

5. Close the menu.

Screenshot of the Color Picker.
The Color Picker enables you to select a color or type in a specific color reference.

How do I add new groups to global fonts and colors?

As noted above, global fonts and colors are divided into four default groups. However, you may also need to add other global fonts and colors. For instance, if your design calls for a lot of headlines, you may want to create a custom color and a custom font group called “Headers,” so that all your headers will look the same.

To do so:

  1. Click Add Style or Add Color at the bottom of Global Fonts or Global Colors respectively. This will add a new global color with a placeholder name and a blank color.
    Add color in the Global Colors menu
    Click add color, choose a color and then Add color again.

  2. Select the placeholder name and rename it.
  3. To set a global color, click the color swatch to open the color picker. 
  4. Select a color and click Add Color.
  5. To set a global font, click the pencil icon and select the font type and size.

Shortcut – How can I use existing elements to add global fonts and colors? 

You can actually use elements you’ve already created to edit your global fonts and colors, saving you a step.  In the example below we’ll use text to add a new global color and font, but this process will work for any element that contains a color and typography settings.

  1. Select text that has the color and font settings you want.
  2. Click the color swatch next to Text Color to open the color picker.
    The color swatch in the edit panel
    Click the color swatch to open the color picker.

  3. Click the plus button.
    The color picker with the add global color icon highlighted
    Click the plus sign to add a global color.

  4. Type a name for the new group in the Create a New Group pop-up.
    The create a new global color text box.
    Enter the name for your new global color.

  5. Click Create. You’ve now created a new global color group.
  6. Select the pencil icon next to Typography
  7. Click the plus button
    The typography modal with the add new global icon highlighted.
    Click the plus icon to add a new global font.

  8. Type a name for the new group in the Create a New Group pop-up.
  9. Click Create. You’ve now created a new global font group.

Now you have a global group that you can edit it as described above.

What is the color sampler?

The color sampler allows you to choose colors based on your page content. Learn more about the color sampler.

Final words 

It’s no fun spending time changing individual parts of your website. Use the Global Settings to speed up all your website changes! 

Now that you know all about Global Settings, take a look at how you can optimize your layouts and improve your productivity. 

Another way to save time and effort is to add your own custom switches to the color picker.  

To get the most out of Elementor, head over to the Elementor Academy for more helpful learning resources. If you come across any issues or need help, please contact our Support Center.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article