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.
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:
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:
So in the absence of this, we're going to change the color via CSS.
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:
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:
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:
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:
Now click below any existing style within the brackets {} and a new line will appear. Type the following:
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.
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:
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:
Now we insert the CSS style.
In your WordPress dashboard, go to Appearance -> Edit CSS as shown here:
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:
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!
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:
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:
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:
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:
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 pThe 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:
Now click below any existing style within the brackets {} and a new line will appear. Type the following:
color: blueReplace 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:
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:
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:
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:
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!
Updated on: 10/10/2024
Thank you!