How To Change The Text Or Font Color In WordPress? Check All Possible Methods!

Do you want to learn how to change the font color in WordPress? I understand that you are new to WordPress and want to modify the text color of your site. 

Changing the color in WordPress Classic or Gutenberg editor is an easy process and can be done in several ways. 

In this blog post, let me explain the possible ways of changing the WordPress font color. Before diving into the details, you should know the benefits of doing it!

Why Change Font Color In WordPress?

Color has the power to grab the readers’ attention. Let’s see the benefits in detail!

Improve Readability – Changing the font color suitable to your site background will make your content easier to read. 

Signify Importance – When you highlight or alter the text color of a particular content, it will signify the importance and nudge your audience to read your highlighted part and take action.

Establish Branding – Customizing the text color to be suitable for your WordPress theme will make your site a memorable platform, boosting your business branding. 

Even though these are the advantages of modifying the font color of your website, if you choose the wrong color that doesn’t match the background, it will cause a poor experience and make your visitors skip reading your content.

As you speak with your readers through the font color, be careful in picking the right one. It can trigger their emotion, and hence, you can push them to react to your call-to-actions.

Let’s come to the point, how to change the WordPress font color and the possible ways to do it! 

4 Ways To Change The Font Color In WordPress

The Gutenberg editor of WordPress has color customization settings through which you can get the job done quickly. If you want enhanced color choices, I suggest installing a plugin.

You may also use your WordPress theme or add CSS custom codes to alter the font color. Let’s see the methods one by one!

  1. Change font color using Gutenberg Or Classic Editor
  2. Change Font color through CSS Codes
  3. Change Font color with the help of the Theme customizer
  4. Change Font color using Plugins

Method – 1 (Use WordPress Editor)

As I said earlier, WordPress has default color settings in its Gutenberg and Classic editors.

You must select a specific line, paragraph, or heading in your blog post. Then, Click the “down arrow Symbol” shown in the image below, and choose Highlight > Text.

wordpress-font-color-gutenberg-highlight

Pick your desired color; that’s it! 

pick-font-color-gutenberg-editor

To change the font of the entire block in the Gutenberg Editor, use the default color setting on your right under the “Block” tab. Just pick your preferred color, and it will be applied. 

gutenberg-block-font-color-settings

Like Gutenberg, the old Classic editor of WordPress has the color settings option displayed in the following image. 

wordpress-classic-editor-text-color-settings

Choose the text of your choice and click the color you want. 

Method – 2 (Use CSS Codes)

Login to your WordPress Dashboard, Go to the Appearance > Customize

It will redirect you to the customize section; click “Additional CSS” 

Code 1 – To change the full site text color, add the following CSS code (See the image below for reference) and click “Publish.”

body{
Color: #ff0000;
}
full-site-font-color-css-code

Code 2 – To change text or font color in the post section, Include the following CSS Code.

.entry-content p{
color:#ff0000;
}

Code 3 – To change the site’s text or font link color, paste the CSS code below.

a {
Color: #ff0000;
}

Code 4: Add this CSS code to change text or font link color in the post section. 

.entry-content a {
color:#ff0000;
}


Method – 3 (Use WordPress Theme)

Don’t want to implement the explained methods to change the font color in WordPress? Use the theme you have installed!

Here, I will explain the details of well-known WordPress themes like Astra, GeneratePress and Elementor.

Changing WordPress Font Color Using Astra Theme

Astra is a well-known customizable theme for WordPress. It includes the settings to change the font color. 

Go to WordPress Dashboard > Astra > Customize

Now, Click Global > Colors > Theme Color, hit the “Body Text” section, and choose your desired color. 

astra-font-color-settings

How To Change the Astra Theme Link Font Color?

Same as before, Visit WordPress Dashboard > Astra > Customize

Go to Global > Colors > Theme Color, click the “Links” section, and pick your preferred color.  

astra-theme-link-color-settings

How to Change The Entire Site Font Color In GeneratePress Theme?

In the WordPress Dashboard > Appearance > Customize

Now, Go to Colors > Global Colors > Body, click the Text section, and choose the required color. 

full-site-font-color-generatepress

How to Change The Font Links In GeneratePress Theme?

Be on WordPress Dashboard > Appearance > Customize

Go to Colors > Global Colors > Body, and click the “Link” section to pick your desired color.

font-link-color-generatepress

How to change Font Color In Elementor Page Builder?

To change the entire site color, go to the post section, click “Edit With Elementor

change-font-color-elementor

Click the icon at the top left, choose Site Settings > Global Colors

elementor-color-settings

The color section will open; Use the “Text” settings will be used to change the font color. After picking your preferred color, don’t forget to hit “Update.”

text-color-settings-elementor

How to change Text color of Post In Elementor?

In the post section, Click “Edit With Elementor

In the text section, look at the “Style” option on the left side (Marked in the image below) and choose the color you need. That’s it!

style-settings-elementor

Method – 4 (Use WordPress Plugin)

When you need detailed Color customization features, go for the Plugin option, as it offers full control over the text, like changing the font style & size and adding background color and image to the text.

Several plugins can do this job; I recommend the “Essential Blocks For Gutenberg” plugin. This free WordPress plugin contains 40+ amazing Blocks to help you make stunning websites with more personalization. 

Install and activate this plugin. Go to the page or post where you need to change the font color in WordPress. Search for the text-based blocks – Typing Text and Advanced Header

essential-blocks-plugin-color-settings

Go to Block Settings > Style. Here, you will get the color settings choices for each part of the text, including its background. With the help of this plugin, it is possible to design the text as you like. 

typing-text-settings-essential-blocks-plugin

Wrapping Up

Font color plays a vital role in user experience and business branding. You must be cautious in selecting the right color that matches your site background. Otherwise, your readers will get frustrated with poor color combinations and skip your site forever. 

As I’ve been using WordPress CMS for over a decade, I have explained all the possible ways of changing the text color in WordPress and hope you will pick a comfortable method of your choice. 

My favorite method is utilizing the default color settings and adding the CSS code to stand out. I’m glad to take a chance to answer the question of how to change the font color in WordPress. If you need help setting up the text color, comment here.

by Sakthi
Sakthi is a thoughtful guy who specializes in WordPress Setup & Design. He is interested in designing the functional & attractive WordPress themes for the Digital marketers & Bloggers and helping them attain their goals with a tailored site. Being an Elite author of ThemeForest.net, he is interested in sharing his knowledge through the helpful tutorials.

Leave a Comment