Changing colors & fonts in Elementor

Learn how to change the color and font of any element in Elementor, and understand when to use element-level settings vs. global styles.

Colors and fonts shape how your brand comes across online. This guide explains how to change them on individual elements in Elementor, and when you should use global settings to update the whole site at once.

Quick summary

To change the color or font of a specific element, click it, go to the Style tab, and update the typography or color settings. For site-wide changes, use Global Colors and Global Fonts instead: click the Elementor logo in the top-left corner of the editor and choose Site Settings.

What you'll need

The Elementor editor open

Changing a text color

Click the text element (Heading or Text Editor widget) you want to change.

Click the Style tab in the left panel.

Find the "Text Color" field.

Choose a color. You can:

Click the globe icon and pick one of your Global Colors, if your site has them set up
Click the color swatch to open the color picker, drag the slider to choose a color range, then click inside the square to pick the exact shade
Type a hex code (e.g., #1a1a1a) into the color picker for an exact brand color

Close the color picker when you're done. The color updates on the canvas.

Changing font (typography)

Click the text element and go to the Style tab.

Find the "Typography" setting and click the pencil icon to open its controls. (To use one of your Global Fonts instead, click the globe icon.)

Adjust the settings you want:

Family — the typeface (e.g., Open Sans, Playfair Display)
Weight — how bold the text is, from 100 (light) to 900 (heavy). 400 is normal and 700 is bold
Size — the text size in px, em, rem, or vw
Line Height — the space between lines of text
Letter Spacing — the space between individual letters
Transform — uppercase, lowercase, or capitalize

Changing fonts on individual elements overrides global styles

An element follows a Global Font only while that global font is selected on it (with the globe icon). If you give an element its own font settings instead, it will not update when the global font changes. Only override individual elements when you have a specific reason.

Changing a section background color

Select the section or container. Hover over it and click the icon in the blue tab at its top, not a widget inside it.

Click the Style tab.

Expand the Background section and set the background type to Classic.

Click the Color swatch and choose your color (or click the globe icon to pick a Global Color).

Changing button colors

Click the button, go to Style, and adjust the Background Color and Text Color fields. See Editing buttons & links for full details.

Global Colors vs. local colors

There are two ways to manage color in Elementor:

Approach	Best for	How to access
Global Colors	Brand colors used across the whole site	Elementor logo → Site Settings → Global Colors
Local / inline color	A one-off override on a specific element	Style tab on the element

We strongly recommend using Global Colors for your primary brand palette. When a global color is updated, every element using that color updates automatically — saving a huge amount of time.

See Global colors & fonts for how to set them up.

Responsive typography

Font sizes can be set differently for desktop, tablet, and mobile. Settings that can differ by device show a device icon next to them. Click the device icon next to the Size setting, choose a device from the dropdown, and set the size for that screen. Elementor suggests switching to that device in the top bar first.

Changes flow downwards: a size you set for tablet also applies to mobile, but a size you set for mobile doesn't change the larger screens.

Common questions

I changed a color but it reverted after I published — why?

Elementor lists a few common reasons a text color won't change:

Formatting pasted from Word or another website. Pasted text can bring its own styles with it. Open the Text Editor widget's Text tab. If you see styling tags such as span tags around the text, remove them.
Elementor's default colors clashing with your theme's styles. This is a site-wide setting, so contact us and we'll check it.
Your theme's own color settings, which are usually under Appearance > Customize in WordPress.

Also check that you clicked Update or Publish. Saving a draft doesn't change the live page.

My font doesn't appear in the font family list — can I add custom fonts?

First, try typing the font's name into the Family box. Elementor comes with over 800 Google Fonts.

If it isn't there, yes, you can add it. Elementor Pro lets you upload your own font files, and Elementor can also connect to an Adobe Fonts account. Fonts are added in WordPress rather than in the editor, and each weight and style is a separate file. Contact us if you need a specific font added.

How do I make all my headings the same size consistently?

Use a Global Font. Click the Elementor logo, choose Site Settings, then Global Fonts. Elementor has four built-in global fonts (Primary, Secondary, Text and Accent), and you can add your own with Add Style. Then, in each heading's Typography setting, click the globe icon and pick that global font. When you change the global font, every heading using it updates automatically.

What is the difference between color and background color?

"Color" (or "Text Color") refers to the color of the text itself. "Background Color" refers to the fill color behind the element or section.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.