Knowledgebase

How to change the font family, size and color of the site title and the tagline in WordPress

If you want to change the font style, size and color of the site title and the tagline ("Just another WordPress site") you can do this with some CSS modifications. To avoid losing these modifications when upgrading WordPress or just the particular theme, and also to make them more quickly, it's recommended that you create a child theme of the particular theme and make the changes to the child theme. If you haven't done this so far check out the tutorial on creating a child theme in WordPress for more information.

Once you have a child theme you can insert the code changes in the style.css file of that theme. Assuming that WordPress is installed directly in the public_html folder on your WordPress hosting account, the path to the file will be public_html/wp-content/themes/name-of-the-theme/style.css. We'll use as an example the theme Twenty Twelve which is one of the default WordPress themes. To set the font family and size of the site title you can insert the following code in the style.css file of the child theme:

.site-header h1 {
	font-size: 28px;
        font-family: Courier, monospace;
}

This will set the size of the font to 28 pixels and the font family to Courier. Note that we've also included the generic family to which the particular font family belongs. In this case the font family is Courier and the corresponding generic family to which it belongs is monospace. It's not necessary to do this; it's for compatibility reasons. If the font family consists of more than one word put quotation marks around its name (e.g. "Times New Roman").

Changing the font family, size and color of the tagline is pretty much done in the same way. The only thing that has to be changed is the part before the brackets:

.site-header h2 {
	font-size: 20px;
        font-family: Verdana, sans-serif;
        color: black;
}

As you can see we've changed .site-header h1 to .site-header h2; these are the corresponding classes for the site title and the tagline in our example theme. Of course, we've also changed the values for font-family, size and color. In the above example the size is set to 20 pixels, the font family to Verdana and the color to black. When it comes to color it's better to use hex values (e.g. #D2B48C) so that you can set it to some shade of a basic color.

Since with most themes the site title is also a link to the homepage of the site we have to use another class to set the color of the site title:

.site-header h1 a {
        color: #D2B48C;
}

If you want the color of the site title to change to a different one when the mouse pointer is hovered over the title, that can be achieved too:

.site-header h1 a:hover {
        color: black;
}

In this case the color will change to black when the mouse pointer is hovered over the title. The rest of the time the color will be set to the HEX value from the previous example.

The code for the font family, size and color that's put inside the curly brackets is the same. You only have to change the values according to your needs. The part that's in front of the brackets, however, is different depending on the particular theme. The above examples will work with Twenty Twelve and many other themes. There are themes that use different IDs or classes (the part before the curly brackets) for the site title and the tagline. For instance, there are themes that instead of .site-header h1 and .site-header h2 use #site-title and #site-description. With some it may be just h1 and h2 respectively. Still others may use #titles h1 and #titles h2, or something completely different. You can always check in the style.css file of the original theme. Some useful tools you can use to do that are the built-in developer tool of the browser Google Chrome (just click with the right mouse button on the element on the page and select Inspect element), and the Firebug extension for Mozilla Firefox.

For information on how to change the style of other text elements on your WordPress site you may find useful the following articles:

Some other articles on modifying the header that you might find useful:

Was this answer helpful?

 Print this Article

Also Read