Say you are currently writing a long article on your WordPress site. To make your article be more comfortable to read, you want to add several headings. In a long article, the use of headings is crucial enough. A heading emphasizes what a paragraph tells about.
Since version 5.0, WordPress has been using Gutenberg as the default editor. To add a heading in Gutenberg, you need to add a new block. Unlike Paragraph, the Heading block in Gutenberg has no option to change the font color on the Color Settings on the right panel. Instead, all you can do are setting the text alignment and heading level. However, it doesn’t mean you can’t change the font color of a heading in Gutenberg.
To change the font color of a heading in the Gutenberg editor, you need a little HTML knowledge. You need to at least know how to change the font color in HTML.
How to change the font color in HTML?
To change the font color in HTML, you can add color attribute on the <font> tag. To specify the color (attribute value), you can use whether the color name or the hex code. Example, the following HTML code will generate a red color:
<font color="red">Color 1</font>
Color 1
While the following code will generate a blue color.
<font color="091df2">Color 2</font>
Color 2
Now that you have understood the concept, you can implement it on the heading element of your article in the Gutenberg editor.
Changing the heading font color in Gutenberg
First off, add a new block by clicking the plus icon and select Heading. Or, you can also turn a paragraph into a heading by clicking the paragraph icon on the leftmost side of the Block Settings.
On the Paragraph block, click the three-line icon and select Edit as HTML
Add the following code between the heading tags.
<font color="091df2">Your heading here</font>
Replace the hex code as well as the heading text on the code above.