Web Development: How to Change the Font Color in WordPress

Thursday, May 21, 2020

How to Change the Font Color in WordPress

Final product image — What You'll Be Creating

Changing the font color in your WordPress site is something you can easily do for a small section of text or a block. Alternatively you can change the color of a specific element or a CSS class throughout your site.

In this quick tutorial, I’ll show you how to quickly change the font color in your WordPress site.

I’ll show you two methods:

Changing font color of an individual block.
Adding a CSS class to a block for color and then styling the class.

I’ll also give you an overview of changing the font color across your site, using your stylesheet.

If you want to learn how to add completely new fonts to WordPress, or how to change the font size in WordPress you can also learn how here.

How to Change the Font Color of a Section of Text

You can choose to make a section of text or a whole block of text in one of your posts or pages a different color from the rest. You can use this to highlight some text and make it stand out, or to enhance the design of your site.

A word of warning: too many colors will make your site look messy and unprofessional. Make sure you use colors that don’t clash.

Start by finding the section of text whose color you want to change.

Select the text you want to change the color of by double clicking it. Click the arrow icon above the block and select Text Color.

Choose the color you want the text to have. The color will change for you in the editing screen.

Alternatively, you can use a hex code to select a specific color. This is a good idea if you want to use a color that’s used elsewhere in your site.

Click the Custom color link and either select a color from the picker or type in the hex code.

Repeat this for any other blocks of text or sections of text whose color you want to change. You don’t have to change the color of a whole block—you can just change one word if you want.

Finally, click Update to update your post or Publish to publish it. That will save your changes.

Now your text will be whatever color you gave it:

How to Use a CSS Class to Change Font Color

If you want to change a bunch of text blocks so they’re all the same color, the best way to do this is by using a CSS class. This way you know they’ll all be the same color and you won’t have to remember what color you used.

Find your text block again and in the Block pane, open the Advanced tab.

In the Additional CSS class(es) field, type in a CSS class. I’m gong to use highlight-color. I’m deliberately not naming the color in case I decide to change it later on.

Now click Update or Publish to save your post.

You now have two options for editing the color of blocks using that class:

add styling in the Customizer
add styling to your theme’s stylesheet

Styling the class in the Customizer is the easiest way to do it, and won’t cause you any problems when you update your theme.

Go to Appearance > Customize in the WordPress admin and click Additional CSS.

In the Additional CSS pane, type in the CSS to change your font color:

.highlight-color {
 color: #e76d16;
}

Change your color in that code to whatever color you want to use, using a hex code. It’s a good idea to use a color that’s in use elsewhere in your theme, or one that looks good with your theme while making the text stand out.

Click the Publish button to save your changes.

Now go to your post in your live site and you’ll see that your block with the highlight-color class is a different color than the text around it:

Now you can use this class for any blocks you want to make that color.

Changing Font Color in Your Theme’s Stylesheet

With the two methods I’ve shown you, you don’t need to edit the files in your theme or have an in-depth understanding of CSS. And they give you a quick way to change the font color in WordPress.

But if you want to edit the color of existing elements in your site (such as all paragraphs or links), or you want to add CSS in the stylesheet instead of in the customizer, you’ll need to edit your theme’s stylesheet.

You can find out more about editing your stylesheet in our guide to adding custom CSS to your WordPress site. If you want to go into more depth, that’s a great place to start.

WordPress

How to Add Custom CSS to Your WordPress Site

Anna Monus

Conclusion

Changing the font color of text in your WordPress site just takes minutes to do. You can either edit the font color directly, or give it a class and then write CSS for your class.

But however you choose to do this, don’t overdo it. And make sure you use colors that work together well to avoid having a site that looks messy and unprofessional.

Make Your Site Stand Out With a Professional WordPress Theme

Are you in designing a new WordPress website? Our collection of professionally-designed WordPress themes can give your website a beautiful new look and feel, within minutes.