How to Change Font Color in WordPress (Block Editor, CSS & Global Styles)

When you should use CSS instead of the editor

If you need consistent, site-wide typography—especially across templates—CSS (or Global Styles) is usually the cleanest approach. Block-by-block styling tends to become unmaintainable on real sites.

Practical next steps

Pick one “source of truth” for typography (theme globals or builder globals), then use CSS only for exceptions. If you’re unsure what’s overriding what, inspect the element in DevTools and follow the winning selector.

Changing font color in WordPress can mean two different things: changing the color of a specific sentence (one block), or changing the default text color site-wide. The right method depends on whether you’re using the Block Editor (Gutenberg), a block theme with Global Styles, the Classic Editor, or a page builder like Elementor.

This guide covers the practical ways developers actually do it—plus the most common reason people get stuck: the color “doesn’t change” because the theme or builder is overriding it.

Quick answer (pick your scenario)

• Change color for a single paragraph/heading: Block Editor → select the block → Color settings.
• Change default text color site-wide: Global Styles (block themes) or Customizer (classic themes).
• Change link color: Global Styles / Customizer, or CSS.
• Color won’t change: it’s almost always a CSS override (specificity) or a builder/theme setting.

1) Change font color in the Block Editor (Gutenberg)

This is the most common case: you want to change the color of a specific block (paragraph, heading, list, quote).

1. Open the page/post in the editor
2. Click the block (Paragraph / Heading)
3. In the right sidebar, open Settings → Color (or Styles depending on your UI)
4. Set Text color (not Background)
5. Update / Publish

Developer tip: If you only want to color a few words inside a paragraph, use the inline text color option (select the words → toolbar → text color). If you don’t see it, your theme may be limiting inline styles.

2) Change font color site-wide using Global Styles (Block Themes)

If you’re using a block theme (Full Site Editing), the cleanest way is Global Styles. This changes the default text color across the site without touching individual pages.

1. Go to Appearance → Editor
2. Open Styles
3. Adjust Colors → Text (and optionally Headings / Links)
4. Save

Best practice: prefer Global Styles for consistency. Block-by-block styling is fine for exceptions, but site-wide defaults keep your typography predictable (and easier to maintain).

3) Change font color with the Customizer (Classic Themes)

If you’re on a classic theme (no full site editor), color settings are often in the Customizer.

1. Go to Appearance → Customize
2. Look for Colors, Typography, or Theme Options
3. Adjust Text / Headings / Links
4. Publish

If your theme doesn’t expose those options, you’ll need CSS (next section).

4) Change font color with CSS (most reliable method)

CSS is the most reliable approach when the UI options are limited, or when you want precise control (e.g., headings only, blog only, specific template only).

Where to add CSS

• Appearance → Customize → Additional CSS (common)
• A child theme stylesheet (best for long-term)
• A custom plugin or Code Snippets (if you prefer not to touch theme files)

CSS examples (copy/paste)

Default paragraph color:

/* Site-wide base text */
body {
  color: #0b1220;
}

Headings color:

h1, h2, h3, h4, h5, h6 {
  color: #111827;
}

Link color + hover:

a {
  color: #6e59a5;
}
a:hover {
  color: #5f4c93;
}

Only inside post content (safer than styling the whole site):

/* Many themes wrap content in .entry-content */
.entry-content p {
  color: #0b1220;
}

Developer tip: Use your browser DevTools (Inspect → Styles) to find the real selector your theme uses. If you guess selectors, you’ll waste time.

5) Elementor / page builders: where the font color is actually controlled

If you’re using Elementor (or a builder), you may change color in WordPress and see no effect because the builder controls the typography.

• Elementor: check both the widget style settings and Site Settings → Global Colors.
• Theme + builder combo: avoid fighting CSS. Choose one “source of truth” for typography (builder globals or theme globals).

If a builder is in control, it can override theme styles with more specific selectors or inline styles—meaning your Customizer/CSS might not win unless you target the builder’s markup.

Why your font color is not changing (real-world fixes)

If you changed the color and nothing happened, here are the most common causes—and how to confirm them quickly.

1) The theme is overriding your color (CSS specificity)

Example: you set p { color: ... } but your theme uses .entry-content p or an even more specific selector. Solution: match or exceed the selector used by the theme, instead of adding !important immediately.

2) The builder is applying inline styles

Inline styles win. Inspect the element: if you see style="color: ...", the builder is controlling it. Fix it in the builder globals or target the exact builder wrapper.

3) You changed background color by mistake

In Gutenberg, “Color” settings often include both Text and Background. Make sure you’re editing the Text color.

4) Caching/minification is showing an old CSS file

Clear your cache (plugin + server/CDN). If your hosting has aggressive caching, test in an incognito window or add a temporary query string to confirm the real output is updated.

FAQ

How do I change font color in WordPress without a plugin?

Use the Block Editor color settings for a specific block, or set site-wide colors via Global Styles/Customizer. If your theme doesn’t support it, add CSS in Appearance → Customize → Additional CSS.

How do I change link color in WordPress?

Use Global Styles (block themes) or Customizer (classic themes). Otherwise, use CSS for a and a:hover.

Why is my text color not changing?

Most of the time it’s a CSS override from the theme or a builder. Inspect the element in DevTools to see which selector is winning, then update your CSS accordingly.

Need help making your site styles consistent?

If your typography looks inconsistent across templates (blog, pages, product pages), it’s usually a mix of theme defaults, builder overrides, and scattered CSS. A short technical review can identify the “source of truth” and give you a clean, prioritized plan.

FAQ