How to Change Font Colour on WordPress: 6 Methods

How to change font colour on WordPress is a simple way to adjust your website’s appearance, improve readability, or match your brand colors. WordPress gives you several ways to change text color, depending on the theme and editor you’re using.

If you’re using the Block Editor, you can change text color directly from the editor without touching any code. For site-wide changes or more control, you can use your theme settings, custom CSS, or a suitable plugin.

In this guide, you’ll learn how to change font color in WordPress for individual text, specific sections, and your entire website. We’ll also cover a few simple tips to keep your text readable and accessible.

Font color is more than a design choice. The right colors can make your website easier to read, keep your branding consistent, and create a better experience for visitors.

1. Keep Your Branding Consistent

Using the same color palette across your website helps create a consistent look. Your headings, links, buttons, and other text elements should work well with your logo and overall brand design.

You don’t need to use your main brand color everywhere. Use it selectively for headings, links, or important calls to action while keeping regular body text easy to read.

2. Improve Readability

Text needs enough contrast against its background to be comfortable to read. Very light gray text on a white background, for example, can be difficult to read, especially on mobile screens.

Dark text on a light background is usually a safe choice, but you can still use other color combinations as long as there is enough contrast.

Good font color choices make your content easier to scan and help visitors focus on the information that matters.

3. Make Your Website More Accessible

Font color also affects accessibility. People with low vision or color vision deficiencies may struggle with text that has poor contrast.

For normal-sized text, WCAG 2.2 recommends a contrast ratio of at least 4.5:1. Large text has a minimum ratio of 3:1.

Also, don’t use color as the only way to communicate important information. For example, instead of showing an error only in red, include a clear message or icon as well.

Choosing readable, high-contrast colors makes your website easier for more people to use.

1. Using the WordPress Block Editor (Gutenberg)

The WordPress Block Editor provides built-in options to customize font colors without needing coding knowledge.

Step-by-Step Guide

1. Open the Post/Page Editor Navigate to the post or page where you want to change the font color.
2. Select the Text Block Click on the block containing the text you wish to modify.
3. Access the Block Settings Panel On the right-hand side, look for the “Block” tab.
4. Choose Text Color
   • Scroll down to the “Color” section.
   • Select a Text Color from the palette or add a custom color using the hex code.
5. Preview Changes Save or preview your changes to ensure the font color aligns with your design.

2. Using the Classic Editor

If you’re using the Classic Editor, the process involves the text formatting toolbar.

Steps:

1. Highlight the text you want to change.
2. Click the Text Color icon in the toolbar.
3. Choose a color from the dropdown or add a custom hex code.
4. Save your changes.

3. Changing Font Color with WordPress Customizer

The WordPress Customizer allows you to change font colors across your entire site.

Steps:

1. Go to your WordPress dashboard.
2. Navigate to Appearance > Customize.
3. Select the Typography or Colors option (availability depends on your theme).
4. Adjust the font color for headings, body text, or links.
5. Save changes and preview your site.

4. Changing Font Color Using Custom CSS

If your theme or WordPress editor doesn’t give you enough control over font colors, you can use custom CSS to target specific elements.

Steps

1. Go to Appearance → Customize.
2. Open Additional CSS.
3. Add the CSS you need. For example:

p {
    color: #FF5733;
}

h1, h2, h3 {
    color: #2ECC71;
}

4. Click Publish to save the changes.

The first rule changes paragraph text, while the second changes the color of your H1, H2, and H3 headings.

Note: If you’re using a block theme, you may find these options under Appearance → Editor instead of the Customizer. Check your theme’s settings before adding CSS.

5. Using Plugins to Change Font Color

Plugins can simplify the process of changing font colors and provide additional customization options.

Popular Plugins

• Elementor Page Builder With Elementor, you can easily adjust font colors using its drag-and-drop editor.
• WPBakery Page Builder Offers robust typography customization, including font color changes.
• Google Fonts Typography This plugin allows you to integrate custom fonts and adjust their colors.

How to Use Elementor to Change Font Colors

1. Install and activate Elementor.
2. Open the page in Elementor editor.
3. Click on the text widget.
4. Navigate to the Style tab and select Text Color.
5. Choose a color and apply the changes.

6. Changing Font Colors in Themes

Some themes come with their own typography settings. Here’s how to use them:

1. Navigate to Appearance > Customize.
2. Look for a dedicated Typography or Design Options section.
3. Adjust font colors for headings, paragraphs, or other text elements.

Popular WordPress Themes with Typography Options

• Astra
• GeneratePress
• Divi
• OceanWP

Each theme may have unique options, so consult the theme’s documentation if needed.

If you need more control than the standard WordPress color settings provide, custom CSS gives you more options.

1. Use Hex or RGB Color Values

You can specify an exact color using a hex code or RGB value.

For example:

p {
    color: #FF5733;
}

Or:

p {
    color: rgb(255, 87, 51);
}

You can use these values in your theme settings or custom CSS.

2. Change Link Color on Hover

You can use the :hover selector to change a link’s color when someone moves their cursor over it:

a:hover {
    color: #FF5733;
}

This can make links easier to notice and gives visitors a clear visual response.

3. Change Text Color on a Specific Page

If you only want to change text on one page, you can target that page using its WordPress page ID:

.page-id-123 p {
color: #FF5733;
}

Replace 123 with the actual page ID. This changes paragraph text only on that page, leaving other pages unchanged.

1. Font Color Is Not Changing

• Check whether your theme has its own color settings.
• Look for CSS rules that may be overriding your changes.
• Clear your browser and website cache after making changes.

2. Different Pages Have Different Font Colors

• Check your theme’s global color settings.
• Review any custom CSS you have added.
• Make sure the same text isn’t being styled differently by a page builder or plugin.

3. Text Is Difficult to Read

Check the contrast between your text and background. WCAG recommends at least a 4.5:1 contrast ratio for normal text and 3:1 for large text.

You can use a color contrast checker to test your chosen colors before publishing them. Also, don’t use color alone to communicate important information, such as errors or warnings.

• Use Enough Contrast: Make sure your text is easy to read against the background, especially on mobile screens.
• Keep Your Colors Consistent: Use a small set of colors that matches your brand and website design.
• Check Different Screens: View your website on phones, tablets, and desktops to see how the colors look in different conditions.
• Follow Accessibility Guidelines: Check text contrast against WCAG recommendations so your content remains readable for people with visual impairments.
• Don’t Rely Only on Color: Use labels, icons, or other visual cues when color is used to communicate important information.

Changing font color in WordPress is a simple way to improve your site’s design, readability, and branding. You can change text colors directly in the Block Editor, use your theme settings, install a plugin, or add custom CSS when you need more control.

Choose the method that works best for your theme and the type of change you want to make. Whatever method you use, keep your colors consistent and make sure the text has enough contrast to remain easy to read.

A few small color changes can make your WordPress website look cleaner and easier to use.

1. How do I change font color in WordPress?

You can change font color in WordPress using the Block Editor, theme settings, a page builder, a plugin, or custom CSS. For a simple change, select the text block, open the color settings, and choose your preferred text color.

2. Can I change the font color of a specific paragraph in WordPress?

Yes. Select the paragraph or text block you want to edit in the WordPress Block Editor. Open the block settings, find the Color option, and choose a text color. This changes the color only for the selected content.

3. How do I change the font color of my entire WordPress website?

You can change the site-wide font color through your theme’s typography or color settings. If your theme doesn’t provide this option, you can use custom CSS to target paragraphs, headings, links, or other text elements.

4. How do I change font color in WordPress without coding?

The easiest way is to use the WordPress Block Editor. Select the text, open the block’s color settings, and choose a color from the available palette. Page builders such as Elementor also let you change text colors through their visual settings.

5. How do I change font color using CSS in WordPress?

Go to Appearance → Customize → Additional CSS if your theme supports the Customizer. You can then use CSS such as p { color: #333333; } to change paragraph text. Block themes may provide CSS options under Appearance → Editor instead.

6. How do I change font color in Elementor?

Open the page with Elementor and select the text widget you want to edit. Go to Style → Text Color, choose a color, and update the page. You can also set global colors in Elementor if you want the same color used across multiple elements.

7. Why is my font color not changing in WordPress?

A theme setting, plugin, or existing CSS rule may be overriding your change. Check for conflicting CSS, clear your website and browser cache, and make sure you’re editing the correct element or block.