Knowledgebase

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

You can change the font family, color and size of post titles and of titles of static pages by making some modifications to the style.css file of your theme.

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.

We recommend that you first read the article on how to change the font family, font style and font color of text in WordPress. It will give you some general information that will help you in making such modifications.

In this article we'll give you some examples that work with some of the default themes that come with WordPress (e.g. Twenty Twelve, Twenty Thirteen) and that also may work with many others. But there are many themes with which you have to make a little bit different modifications.

In most themes the element (class or ID) that is used to style post titles is the same one as the one for the titles of static pages. Another point to consider is that there are post list pages such as the frontpage that display many posts per page. In addition to this each post has its main individual page that shows the full content of the post and its comments. Usually, the post titles on post list pages are also links that lead to the main page of each particular post.

Very often the element that defines post titles on post list pages and on individual post pages is the same and it will work for changing the font family and size on both page types. However, when it comes to changing the color it might be more tricky because links are often shown with a different color and respectively different elements are used to define them. What this means is that what works for changing the color of post titles on individual pages (and of titles of static pages) will not change the color of titles on post list pages.

Examples of such themes are Twenty Twelve and Twenty Thirteen. The following code put in the style.css file of a child theme of those themes:

.entry-title {
	font-family: Courier,monospace; 
	font-size: 30px; 
	color: green; 
}

will change the font family and font size of post titles on each individual post page and on post list pages (e.g. the frontpage). The color of the titles will be changed only on the individual post pages. The titles on post list pages are links and they have their own colors defined. The above code will also change the font family, size and color of titles of static pages. To change the color of the titles of posts on post list pages you can use the following:

.entry-title a {
	color: purple;
}

You can also use this code if you want the titles of posts on post list pages to have a different size and font family than the titles of posts on individual post pages. Just put the respective size and font family in the brackets:

.entry-title a {
	color: purple;
	font-family: Verdana,sans-serif;
	font-size: 35px; 
}

Links can also have a different color (and font size and family) when the mouse pointer is hovered over the link. And since post titles on post list pages are links you can change the hover color:

.entry-title a:hover {
	color: red;
}

A separate color for visited links can also be set:

.entry-title a:visited {
	color: yellow;
}

In short, in our example themes Twenty Twelve and Twenty Thirteen you can use .entry-title a to set the color, size and font family of post titles on post list pages and .entry-title to do this for titles of posts on individual post pages and of the titles of static pages.

Some themes use the same class to define post and page titles while others have completely different ones. For example, in the theme Twenty Eleven the titles of posts on individual post pages and the titles of static pages are defined with .singular .entry-title. For example:

.singular .entry-title {
	font-family: Courier,monospace; 
	font-size: 30px; 
	color: green; 
}

While titles of posts on post list pages are defined in the same way as in Twenty Twelve and Twenty Thirteen with .entry-title a followed by the brackets with the code.

Other themes may have the titles of posts on post list pages defined with .entry-title a:link and the titles on individual post pages (and static pages) with .entry-title-single or #content .entry-title. That's why it's important first to discover how the element is defined in the code as explained in the article on how to change the color, font size and font family of text elements in WordPress. Of course, you can always experiment by inserting different code (and then removing it if necessary) in the style.css file of the child theme.

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

Was this answer helpful?

 Print this Article

Also Read