Knowledgebase

How to change the font family, size and color of post and page content in WordPress

To change the font family, font size and font color of the content of posts and static pages you have to make some modifications to the style.css file of your theme.

Keep in mind that the color of the content of each individual post/page can be set by using the built-in text editor on the add/edit post and page form in the admin panel.

To change the default color of the content, as well as the font size and style, of all posts and pages, you have to make some code changes. It's highly recommended that you use a child theme and modify the style.css file of the child theme and not that of the original theme. Don't forget that each theme is different and the modifications performed to one theme may not work in another.

Before you read this article check out the one on how to change the font family, size and color of text in WordPress. It's a general introduction that will help to understand where and how you can perform such modifications.

If you have read it, then you know that text elements are usually distinguished from each other in the code with the help of classes and IDs. Themes often use different classes and IDs for the same text elements but there are many which use the same ones or very similar ones. In this article as an example we'll use the code from the themes Twenty Thirteen and Twenty Twelve. The same examples will work in many other themes but not in all. In the general article on changing the font family, size and color we've described how to find the classes and/or IDs that are used in your theme.

In the themes Twenty Thirteen, Twenty Twelve, Twenty Eleven and in many others the text of the content of posts (both on post list and individual post pages) and of static pages is defined with .entry-content. So, for example, the following code inserted in the style.css file of the child theme will change the font family of the post/page content to Arial, the size to 20 pixels and the color to brown:

.entry-content {
	font-family: Arial,sans-serif; 
	font-size: 20px; 
	color: brown; 
}

As we already mentioned, the class or ID used to define the content of posts and pages is theme-specific. In some themes it may be defined with just .entry, for example, or with something completely different.

When it comes to the content of posts and pages you have to keep in mind that in addition to the regular text there are some other elements in the content itself, such as links, blockquotes, headings (from 1 to 6), etc. They can be inserted into the content from the built-in text editor that's used on the add/edit post form to type the text of the post/page.

Changing the color, size and font family of the text in the content may or may not affect these elements. Changing the size and font family, for instance, affects the links in the text, but their color is not changed. Blockquotes are also usually affected by the changes of the font family and color of the text of the content, but sometimes changing the size doesn't change the size of the text in blockquotes. Headings within the content (these are not the post and page titles) often are not affected by any color, size or font family changes, or just some of the headings are affected. It all depends on whether in the code these elements are configured with their own specific color, size and font family. And this is again theme-specific.

In the code these text elements are also defined with some class or ID, so you can use it to change their color, size and font family, and if you want to they can be different than the rest of the text of the content. For example, to style the links in the content of posts and static pages in the themes Twenty Thirteen, Twenty Twelve, Twenty Eleven and many others you can use .entry-content a inserted in the style.css file of the child theme:

.entry-content a {
	color: gray;
}

The above code will change the color of links within the content to gray.

As with post titles you can add a different styling when the mouse pointer is hovered over the link by using .entry-content a:hover. With some themes instead of .entry-content a you have to use .entry-content a:link, and with others it may be something different.

In our example themes blockquotes can be styled with .entry-content blockquote:

.entry-content blockquote {
	font-family: Verdana,sans-serif;
	font-size: 15px;
	color: yellow;
}

The above code will affect only the blockquotes and not the rest of the text in the content.

Headings from 1 to 6 in the example themes can be styled respectively with .entry-content h1, .entry-content h2 and so on until heading 6. For example:

.entry-content h1 {
	font-family: "Times New Roman",serif;
	font-size: 18px;
	color: blue;
}

When you insert a heading from the built-in text editor you'll notice that you can choose from heading 1 to heading 6 (heading 1 being the biggest one). So you can use the respective code to style each.

If you want to change the font family, size and color of other elements on your site you may find useful the following articles:

Was this answer helpful?

 Print this Article

Also Read