How to change font color in WordPress (Quick guide)

A newly created WordPress website has default font colors that may not be attractive or useful for that website. For example, if the user highlights the text on your page, the default color of the text will be blue which doesn’t work with some websites.

This article created by our team at WpDataTables will show you how to change font color in WordPress by using CSS. One of the first aspects to consider with a new website is which theme to choose. Generally, few of the default themes will fit the overall design of your site, so some adjustments are required.

One of these adjustments is the text color. However, some of the themes don’t offer the opportunity to change it. The WordPress Theme Customizer can be used if the theme offers this option, otherwise, use the classic editor or CSS.

The most reliable way to change font color in WordPress is by using code, however, this can be intimidating for those not familiar with coding.

The list below contains a number of options.

Note: This only works for WordPress.org blogs; if you use WordPress.com, the process might be slightly different, although they could work. To use the full power of WordPress, consider switching from WordPress.com to WordPress.org.

How to change font color in WordPress

Method #1: Change Font Color in WordPress with the Theme Customizer

Firstly check whether your theme supports to change the font color by following these steps.

• First, go to Appearance > Customization in your WordPress dashboard as shown here.
• Here, each WordPress theme will display the various customization options; choose one that offers the color palette for fonts. Note: if you don’t want to change the theme, and the current one doesn’t offer this change, then you should use other methods.
• Then, go to Appearance > Customize > Colors. On the next page, various options are available depending on your theme.
• If your theme doesn’t offer customization options, consider using other methods.

Method #2: Change Font Color in WordPress with the Classic Editor

The classic editor does not easily enable changing font color in WordPress because the developers decided to hide this option to change it. However, it is possible, and here’s how.

• Go to the dashboard, find the post you want to edit.
• To see the text color click on the “Toolbar Toggle” button, which is located right under the “Add Media” and “Add Contact Form” buttons.
• Some extra options should now appear, one of which is the “Text color” option from the drop-down box.
• When you click on the down arrow, there should be various customization options for the font text, normally available on other customization tools. If you don’t like the color options (there are 39 of them), you can use custom font colors. If you press on the “X” button in the bottom right corner, it will change the color to “no color”, which will automatically adjust the text color.

• Providing you know the hex code of your desired color, you can use this to change the color.
• If you want to do it without the code, you can click on the “Custom” button near the bottom of the “Text color” menu.

• Then you should see a square box in the top right, ranging from red to black. There’s also a rainbow rectangle on the right, where you can choose your preferred color.
• To change the color visually, click anywhere in this rainbow box; you can also change the shade by dragging in this box. The color of the black box should change to the custom color you’re making. At the top, you’ll see the preview of the text with the color you’ve made. Then, when you’re ready, an automatic code will be generated at the top which is helpful if you wish to match the other colors later on.
• If you want the specific shades of red, green, and blue, enter the values in the RGB boxes on the right. You can also enter the code you need for this color.
• To save the custom color, click on Enter or on the button Ok. To cancel, click on the x or “cancel” which will exit the menu without changing anything.

• When you choose the right color, click on the “Update” button to conclude.
• To use this custom color in future projects, you need to go through this process again because the custom color won’t be saved. If you want that color permanently, you’ll need to update the CSS of the theme and add the color in it.

Method #3: Change Font Color in WordPress Globally with CSS

CSS is the most effective and reliable method to change the text color globally. Here’s how to do it.

• Go to: Appearance > Customize > Additional CSS. Add the code for the changes to take effect.

• To change the font color for the headings from 1 to 6, the code would look something like this:

h1, h2, h3, h4, h5, h6 {

  color: #1F618D;

}

Note that the change will only change the font color of the headings of the pages and posts, not the overall post title. You’ll need to add a more specific CSS code to make this change. For example, to change the title, enter this code:

.entry-title a {

   color: #1F618D;

}

To change the text color of post titles, use this code:

h1.entry-title {

   color: #1F618D;

}

If you want to find the specific color from the current page on Firefox or Chrome and use that, you can find the code using the inspect tool.

This color chart will help you find the specific hex code for the color you want.

 

 

FAQs about changing the font color in WordPress

1. How can I change the font color of my WordPress website’s text?

You can use CSS to alter the text’s font color on your WordPress website. On your WordPress dashboard, navigate to Appearance > Customize > Extra CSS to open the CSS file. The font color can then be altered using the color attribute. You can use the following code, for instance, to make your body text red: body {color: red;}.

2. Is it possible to change the font color of specific text within a WordPress page or post?

With a WordPress page or post, you can alter the font color of the specified text. To add HTML tags around text that you want to change color for, utilize the Text Editor in the WordPress editor. For instance, to make a particular sentence green, you can enclose it in a span element with the style attribute: <span style=”color: green;”> Your sentence here</span>.

3. What is the easiest way to change the font color in WordPress?

A page builder plugin with built-in options for changing font colors is the simplest way to alter the font color in WordPress. You may alter the font color with a basic color picker and plugins like Elementor, Beaver Builder, and Divi without knowing any code.

4. Can I change the font color in WordPress without knowing any coding?

Sure, you can use a page builder plugin that has built-in features for altering font colors to change the font color in WordPress without learning any coding. As previously noted, you may easily alter the font color with a simple color picker and plugins like Elementor, Beaver Builder, and Divi without any technical expertise.

5. How can I change the font color of my WordPress theme’s header text?

You can use CSS to alter the font color of the header text in your WordPress theme. To locate the proper CSS selector, use the developer tools in your browser to examine the header text. The font color can then be altered using the color attribute. For instance, you can use the following code: #header h1 {color: blue;},  blue; to make your header text blue.

6. Is it possible to change the font color of my WordPress website’s navigation menu?

The font color of the navigation menu on your WordPress website can be changed, yes. The menu items’ colors can be altered using CSS. To locate the necessary CSS selector, use the developer tools in your browser to examine the menu. The font color can then be altered using the color attribute. For instance, you can use the following code: #menu li a {color: green;}, green; to make your menu items green.

7. How do I change the font color of my WordPress website’s widget titles?

You can use CSS to alter the font color of the widget headers on your WordPress website. To locate the proper CSS selector, use the developer tools in your browser to look at the widget title. The font color can then be altered using the color attribute. You can use the following code, for instance, to make your widget titles red: .widget-title {color: red;}.

8. Can I change the font color of my WordPress website’s footer text?

You can alter the font color used for the footer content on your WordPress website. The color of the text in the footer can be altered using CSS. To locate the appropriate CSS selector, use the developer tools in your browser to examine the footer. The font color can then be altered using the color attribute. For instance, you can use the following code to make your footer text purple: footer {color: purple;}.

9. How do I change the font color of my WordPress website’s links?

You can use CSS to alter the link’s font color on a WordPress website. All of the links on your website can be targeted using the a selector.

The font color can then be altered using the color attribute. You can use the following code, for instance, to make your links black: a {color: black;}. You can use a more narrow CSS selector if you just want to target particular URLs.

10. What is the CSS code to change the font color in WordPress, and where do I add it?

The color property in CSS is used to modify the font color in WordPress. To modify the font color of a certain element on your website, add this attribute to the relevant CSS selector.

Go to Appearance > Customize > Additional CSS in your WordPress dashboard to add CSS code to your website. Next, after adding your CSS code, you can save your changes by clicking the Publish button in the text editor.

Alternatively, you can go to Appearance > Editor in your WordPress dashboard and add CSS code to the style.css file for your theme. To prevent losing your modifications when you update your theme, it is advised to utilize a child theme.

Ending thoughts on how to change the text color in WordPress

Knowing how to change the text color in WordPress is one of the most important things for a web designer. Designers can often spend hours looking for proper solutions for their designs and trying to optimize their choice of colors and design options. Besides everything mentioned above, you can use the help of the color calibration software. Experiment and find the best solution. If done properly, the result will be an attractive website that gets clicks and users.

The more attention to detail, the more attractive the site including font color. At the same time, the site should function well and the user experience should be flawless, making sure design and functionality are perfectly balanced.

If you enjoyed reading this article on how to change font color in WordPress, you should check out this one about how to disable comments in WordPress.

We also wrote about a few related subjects like how to password protect WordPress site, website maintenance cost, WordPress stuck in maintenance mode, WordPress multisite, WordPress header, WordPress dashboard login, and WordPress tagline.