How To Change The Font Color

All themes need to be customized in order to achieve the look and feel you want. Despite the thousands of free and paid themes for WordPress, you'll never find one that fits you out of the box. One of the most common customizations is to change the background, the font color etc. Unfortunately, not all themes give users the option to change the font color in WordPress. In this tutorial, I'll show you how to do exactly that.

Step 1: Check and See if your Theme Supports Font Color Changes

If you're lucky, your theme will already have the option to change your font color. To check, go to Appearance -> Customization in your WordPress dashboard as shown here:

Appearance Customize

Each theme exposes different customization options. So try and find one that looks like it may have a selection palette for the font color. As you can see below, the Genesis child theme I'm currently using does not have this option:

No Font Color Option

So in the absence of this, we're going to change the color via CSS.

Step 2: Open the Font Inspection Panel for your Website

Open your website in a window with the font you want to change. Now right-click on any font item and choose "Inspect" for Chrome or "Inspect Element" in Firefox as shown here:

Inspect the Font Element

This will open two new panes side by side within the window. Each line represents the next element. Make sure that the font you want to change is selected as shown here:

Make Sure That Text is Highlighted

This will display the corresponding styles for that element in the other pane. We need to find the one that applies to our theme. If you're using WordPress, a good rule of thumb for selecting the font is to look for this rule:

.entry-content p

The class "entry-content" is a standard selector for WordPress post and page content and "p" refers to the paragraph style. As you can see below, it's available in the style pane:

Use the Color Property

Now click below any existing style within the brackets {} and a new line will appear. Type the following:

color: blue

Replace blue with any color you want. Alternatively, just press tab after typing "color" and you'll see a drop-down list of available colors. You can even specify the RGB or the hex values if you know what you're doing.

Step 3: Preview the Colors in Real Time

As you make changes to the style, the text on the page will change in real time. I love this functionality because it allows me to see exactly what I'll get when I insert a new style. For example, here's what it looks like when I change the text color to blue:

Check Changes in Real Time

It hasn't really changed. This is just for me. If you reload the page, it'll go back to what it was. So once you've found a color that you like, copy the entire rule from the browser, right click, and hit copy like this:

Copy CSS Rules

Now we insert the CSS style.

Step 4: Inserting the CSS Style into WordPress

In your WordPress dashboard, go to Appearance -> Edit CSS as shown here:

Edit CSS

This will open a new window displaying your custom CSS for this particular theme. It might already have some content inside it. Just move to the very end and paste the style you copied from Step 3. Also, remove all lines inside it except for the "color" line as shown here:

Insert CSS Rule and Save

The preview of your site on the right-hand side should change as well. If it's what you expect, then save your changes by clicking the blue "Publish" button at the top, and you're done. You've successfully changed the WordPress font color using CSS styles!

Was this answer helpful? 0 Users Found This Useful (0 Votes)