• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Change The Font Color In WordPress

Bhagwad Park

Published on: August 1, 2018

Categories: WordPress 5

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!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Comments

  1. Vishal says

    December 30, 2019 at 2:35 am

    How Do I Change Menu Background Colour

    Reply
  2. Shannon says

    February 23, 2020 at 12:12 am

    THANK YOU SO MUCH!!!

    Reply
  3. Meena says

    February 27, 2020 at 5:43 am

    Want To Change Font Size ,

    Reply
  4. Marathi Actress Biography says

    June 23, 2020 at 5:48 am

    Dear Team
    How do we change Menu color

    Reply
  5. charlene says

    March 2, 2021 at 8:50 am

    There is no css on my wordpress….

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA