Knowledgebase

How to change the font family, size and color of comments in WordPress

If you want to change the font family, font size and font color of the content of comments shown on the frontend of your WordPress site, you can do this with some modifications to the style.css file of your theme.

Before you continue with this article we recommend that you read the article on how to change the font family, font size and color of text elements in WordPress. It will give you some basic information that will be useful in learning how to change the font family, size and color not only of the content of comments but also of any text element.

In this tutorial we'll give you some concrete examples for the content of comments in particular. As an example we'll use the themes Twenty Thirteen, Twenty Twelve and Twenty Eleven. These examples will also work in many other themes, but keep in mind that each theme is different and in many other themes these examples will not work. For those other themes you need to use the correct class or ID with which the content of comments in that theme is defined (as explained in the general article on changing the font family, size and color).

We strongly recommend that you don't edit the style.css file of the original theme. Use a child theme instead. After you create the child theme, make it the active one and insert the code in its style.css file. For more information read the tutorial on how to create a child theme in WordPress.

Now let's move to the examples. In the themes Twenty Thirteen, Twenty Twelve, Twenty Eleven and many others the content of comments is defined with the class .comment-content which means that you can set the font family, size and color with code like this inserted in the style.css file of the child theme:

.comment-content {
	font-family: Arial,sans-serif;
	font-size: 15px;
	color: black;
}

As we mentioned, the class or ID used to define the content of comments is theme-specific. In some themes it may be defined with .comment-body or #commentlist,#content, or with something different.

As with the content of posts and pages, there are some text elements in the content of comments that may not be affected by all or some of the changes performed to the content of comments. Examples of such elements are blockquotes and links within the content of comments. Whether such element are affected depends on the particular theme.

Links, for instance, are usually affected by the change of the font family and font size of the content of comments, but are not affected by color changes because they have their own color set. As is usually the case, to modify links just put a after the class for the comment content:

.comment-content a {
	color: purple;
}

If you want links to have a different font family and size than the text in the content of comments, you can also specify a different font family and size.

You can also modify the styling of links when the mouse pointer is hovered over the link:

.comment-content a:hover {
	color: red;
	font-size: 20px;
	font-family: Courier,monospace;
}

You can also set a different color for visited links:

.comment-content a:visited {
	color: gray;
}

To modify the style of blockquotes that are in the content of comments just put blockquote after the class for the content of comments:

.comment-content blockquote {
	font-family: Verdana,sans-serif;
	font-size: 12px;
	color: green;
}

You can try all sorts of combinations by inserting code in the style.css file of the child theme, saving the file and then refreshing the frontend of your site to see the result.

For examples of changing the style of other text elements in WordPress you may find useful these articles:

Was this answer helpful?

 Print this Article

Also Read