How to Change Font Color in WordPress – With Plugins and CSS Only

Hi! Welcome to WPEra. We are here to solve all your problems, small or complex, regarding WordPress.

We all know that WordPress websites have become exceptionally trendy for their robust content management system

Because WordPress is quite powerful when it comes to website building. Moreover, WordPress-built websites are more optimizable in search engines, which provides extra benefits in web development.

Our blog post regarding WordPress font color changing will come quite handy to those who are just getting started developing websites and also pros who are looking to brush up their skill.

Why Change Font Colors in WordPress?

It goes without saying that font colors usually carry meaning in the primary text. Font color also plays a significant part in highlighting a crucial statement or giving life to a dull statement on a web page. Moreover, you might feel like the font color isn’t quite right and want to change it later.

What are you to do in situations like these? A new web developer might face difficulties in changing the font color in WordPress. This is why we’ve put together this blog post, so you can clearly see how to change font color in WordPress step by step.

If you are not satisfied with your current WordPress theme like travel blog theme and want to make it better, then you are in the right place. Here, we’ve combined some helpful tips and guides to help you change font colors easily in WordPress.

Moreover, as every person is different, WordPress’s problems and changing font colors on a WordPress site would also vary. Some may find difficulties changing font colors in a theme, while others may find it hard to change only single blocks in WordPress.

By considering all of these problems, we tried to develop some tips and clear documentation in changing font colors in WordPress. Let’s get going!

PHP is a server-side programming language that was used to write WordPress. All the PHP files that make your website have .php as an extension. If need to update the php you can check this article  to update php in wordpress

Quick Techniques to Change Font Color

With the diligence of talented developers, WordPress keeps improving every day. Nowadays, you can change font color in websites easily through WordPress. Let’s take a look at some of our favorite methods.

Using Gutenberg To Change Font Color In Posts

You might be working on a blog/post (that could be either your own or someone else’s) when you feel like changing the font color. In a situation like that, there is a default setting in the latest versions of WordPress called “Gutenberg.”

It’s the most recent WordPress editor, and you can change not only the color of fonts but also the way of creating a post, products, pages, etc. Gutenberg’s latest version will automatically pop up when you put the cursor beside your text in WordPress. Moreover, there are two ways of changing the font color in the “Gutenberg” editor.

Changing Whole Content’s Font Color Using Gutenberg

Go to Dashboard > Post > Add New and click on it.

It will show you a writing space. Create a paragraph block >Write your content there.

Above the text, you will see an automatic default Gutenberg editor

Select the whole content in a block > Go to “Dropdown” arrow > Select “Text color”

Now either choose a color from default or, simply customize your color with the custom option.

A website titles help the user to understand, what the website is about. The site title and description givers your website an identity. If you want to know how to change site title and tagline in WordPress then this article is better for you.

Changing A Single/Specific Paragraph/Text/Word Using Gutenberg

First, create a new post or page and type your content. On the other hand, you can just edit your post/page, which you already created before. Create a paragraph block and place your text there. Now you will be able to change your font color. We are showing you the method of how you can do this in a minute.

Simply highlight the text you want to change the color of by using your cursor. Now look the right sidebar, here you will see two tab (Documents & Block). In the block tab you will see color settings as like the picture below 

Now you can select your color from the color panel and you can also choose custom color from the “custom color” options like the picture below.

The output will be like this, So simple isn’t it? Now practice these steps to become swift in changing colors of fonts.

Using Classic editor to change font color

Classic editor is the previous version of Gutenburg editor in WordPress. The only difference between these two editors is that the Classic editor only shows some basic formatting options, whereas the newly designed Gutenburg works and designs elements in a block.

Also, editing options are less in the Classic editor. So, both of them have different interfaces. Let’s get back to the Classic editor. If your WordPress version is the latest one, you might need a plugin first to activate your classic editor.

Below we will show you using the Classic editor to change the font color. Activating “Classic Editor” plugin for the recent versions of WordPress.

First, log into your WordPress website > Go to”Dashboard” > Plugins > Add new.

Then click “Add New” inside plugins > Search “Classic editor” > Search “Classic editor” plugin  .

Click “Install now” on the “Classic Editor plugin”.

After installing Click “Activate plugin”.

So, after activating the classic editor’s plugin, you might be thinking of changing the font color. The step by step process is given below:

Go to dashboard>select “Post”/”Page” where you want to change font color. (Here we are showing you only the method for post.)

now you will see your new post page like this!

Here you will see a big icon bar, Sometimes the whole icon bar doesn’t show. What to do in that case? Simply go to the Toggle toolbar > Click on it.

Select text/content that you want to change > Go to the “Dropdown” arrow beside the text (A) .

Choose font color from the color panel. you will see the text color will be changed like the picture below

As a Webmaster learning how to duplicate a page in WordPress is an important feature and you should all know how to do it.

Customize Font Color Using The Classic Editor

Simply execute the previous process > See the option “Custom” > Customize your font color > Click on “Ok”.

You will see that your font color is changed.

Changing Font Color Using The CSS

Firstly, for using CSS, go to Appearance > Customize > Additional CSS (last option of the list) in the dashboard. After clicking on the Additional CSS tab, you will see some instructions and a CSS box to customize CSS code.

If you are a beginner, just copy the CSS color code in the box; for changing color, reproduce your desired hex color code from the browser and paste it inside color: and semicolon. By saving, it will change the font color on every page and post as you prefer.

Without a CSS stylesheet file, the WordPress theme is incomplete as it represents the visual design and layout of the websites. Using CSS is a must for every theme developer.

Now let’s see below step by step how we can change font color in WordPress using CSS. 

Method demo of CSS:

In the WordPress dashboard, go to the Appearance > customize option.

Select Additional CSS, which is at the bottom of Customize option.

By selecting the Additional CSS option there, you can see some instructions and a CSS code box.

Type CSS code in the code box. like this

Extra Changes Using CSS:

CSS code for changing headings H1 to H6:

Authors in WordPress are a great way of giving proper credit. Let’s learn how to change the author in WordPress with best solutions for you.

What To Do if there is no Color-Changing Palette in Your Theme?

You might face difficulties if you can’t find a color-changing palette directly in your theme settings. However, by using a code inspector, you can also change font color in WordPress. Additionally, to change the wide font color from your theme settings in your site, check out this short demo:

Method: Demo for the Code Inspector

First of all, perform a thorough check on your theme to see if it supports changing font colors. For checking, go to WordPress Dashboard > Appearance > Customize.

Try searching for a selection palette from customizing. Keep in mind that different themes get different types of customization. You might not get the exact option name that you’re searching for. It can be a name that’s close or synonymous with what you’re looking for.

If there is no color-changing option in settings, click right of your cursor and inspect(chrome) /inspect element (firefox) for the font in the website window.

There you will see an option named “elements.” From there, find the one which applies our theme.

Or, simply look for this code we’ve given below:

You can see the code inside the “Styles” option.

Go ahead and change it. Don’t forget to put a semicolon after your color name/code. So, by this, you can change your font color as well.

Learning how to add a table in WordPress is a skill that every blogger should have, since it displays information in an easy format for you.

Changing Font Color in Theme Settings

Sometimes you might need to change the font color across the whole website or even just a small part in your free/regular default theme. Even if it’s a premium theme, still the process is the same. You need to purchase that theme, then activate and change it like the normal ones.

However, in specific cases, you might need the author’s permission to change a paid theme’s font color. In that case, you might need to contact the author to get your desired color of the font on your site. Here we will show you step by step for changing font colors with a demo in a basic theme. For this, we are using a theme called “OceanWP.”

Method :

Go to dashboard >  Appearance > Customize to open your theme customizer.

Then find the option named “Typography”/ an equivalent option.

There might be an option named “Body”, simply click on it.

Select font color  selector and from the color picker choose hex code to pick your color. Lastly, click on the “publish” button.

Using Page Builder for Tweaking Font Color

For this, you need a page builder to change your font color in WordPress. The best way is to choose a free page builder online. For this, simply search “page builder for WordPress” in your browser. Then select the website on the browser list.

Depending on the website, some might ask you to pay, and others are free. I suggest you choose a free one and start working on changing your font color. The process we will show here might seem different, but other font editors in WordPress also employ a similar approach.

Seedpod, beaver builder, Divi, Elementor, etc are very popular in the market. Here we are showing you one demo of a builder that shows how it works. So we will go with the “Elementor” page builder.

Search for “Elementor page builder” on Google

Go to the link and download the plugin

Change/customize your font color from the ‘Edit text Editor’ bar.

This might feel new or different for you, but it also changes your font colors on your WordPress site.

Beaver Builder vs Elementor both are best for development, Some might say that Builder is more for the developers but this is subjective.

Why You Should Choose a Standard Color ?

Green, yellow, magenta, cyan- these colors work exceptionally well if you want to make your text more readable and remarkable. On the other hand, colors like purple, red, and blue make the heading or article seem bland on a black background. Therefore, we need to consider many crucial things while setting our site’s writing colors. Mainly, We have to keep the background in mind.

A light text pops well on a dark background, and dark text is the opposite. Furthermore, using colors in the background and text which are too close in tone makes the article hard to read. Lastly, for aesthetics, we should avoid going with overly bright color combinations for our websites.

How can you Get Hex Color Codes for Your Fonts?

If you are a beginner in WordPress and just started a new project to reach your goals, user readability is crucial for your website. We change font colors to enhance the visual appeal and make sure the text has optimal readability.

There are some ways to change the colors of fonts on websites. One of them is by using hex color. Hex colors represent RGB(red, green, blue) and mix colors into a six-digit combination of variables and letters.

To get your desired color, just go to your browser, search for color codes, and voila! There you will get plenty of colors. You can type or simply copy-paste the color code to your CSS code to change the font color.

Summary

From editing the font color directly to using a class with CSS or other processes like Gutenberg/Classic editor, Theme settings, inspecting, block editing takes minutes for changing the font color in WordPress. Also, page builders are instrumental in this way these days.

Changing fonts will enhance the appearance of your desired website, blog page, affiliate shops, etc. Also, who doesn’t want their websites showing in the 1rst place in search engines? Your primary target might be optimizing your fonts for better ranking in search engines and user-friendly so that beginner to professional users can also find their necessary information quickly.

If you went through our documentation, we hope you will be able to change font colors easily. Thank you for sticking around attentively!