# Global Color & Fonts

### **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](https://elementor.com/academy/global-colors-fonts-creating-a-design-system-with-elementor/) 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](https://elementor.com/academy/full-site-editing-and-dynamic-colors-in-elementor/) on the site you want to update.
* Select Site Settings.
* In **Settings,** select **Site Settings**.
* Global Colors and Global Fonts are at the top of the Site Settings Menu.

<figure><img src="https://content.gitbook.com/content/3T4pdZgQSho4s9kQgCDY/blobs/ZgVb3CcBqfqN9Rq95ZYw/color_setting.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/3T4pdZgQSho4s9kQgCDY/blobs/baLauvcR3ku01m7QnCfF/Screen%20Shot%202025-08-11%20at%204.16.44%20PM.png" alt=""><figcaption></figcaption></figure>

You can now access either **Global Fonts** or **Global Colors**.

**Note**: If you [change the Site Settings](https://elementor.com/academy/how-to-use-elementor-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.&#x20;

#### Change a global font:&#x20;

* Click **Global Fonts**.&#x20;
* Go to the font labeled **Primary** (it’s listed under System Fonts).&#x20;
* Select the **Pencil icon**.&#x20;
* Change attributes in the **Typography** menu.&#x20;
* Close the menu.

#### Change a global color:

* Click **Global Colors**.&#x20;
* Go to a font label called **Primary** (it’s listed under System Colors). &#x20;
* Click the color swatch to open the **Color Picker**.&#x20;
* Select the color you want from the **Color Picker.**&#x20;
* Close the menu.

Setting color for your site

1. **The Primary Color** is the main color of your site.

* Regular: original color
* Hover: color when hovering items

Example: Button background color, Link Color, and some other places.

2. **Text Color** is the color of the content text.

Example: Color content, description ... in a single blog, single product, page ...

3. **Accent Color** is the color Title...

Example:  Button Color, Title Tab ...

4. **Border Color** is the color border block.

Example: border product block, border form input, and places with borders ...&#x20;

5. **Light Color** is the color light used for sub-description.

Example: Color categories, color date-time, color subtitle ...

Note: Color is sometimes used for many special places to see which colors apply correctly to what cases you can select and test.