Knowledgebase

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

In this article we'll give some general information that will help you to change the font family, font size and font color of text elements on your WordPress site. You can change the font family, color and size of any text element (e.g. site title, tagline, post and page titles, post and page content, comment content, etc.) by making some modifications to the style.css file of your theme.

Note that when it comes to the color of the text in the content of posts and static pages, it's possible to change it for each individual post/static page by using the respective option in the built-in text editor on the add/edit form in the admin panel.

Although it's possible to change the font family, size and color of any element by modifying the style.css file of the original theme, it's much better if you use a child theme. This will preserve all modifications from being overwritten when the original theme is updated, and it's quicker and easier to make modifications to the child theme. For more information on how to create a child theme read the tutorial on how to create a child theme in WordPress or the shorter article version on how to add and configure a child theme in WordPress. Once you have the child theme, you can make it the active theme and modify its style.css file. You just need to insert the appropriate code in the style.css file of the child theme.

Another very important thing you have to keep in mind is that each theme is different. So the changes that work in one theme may not work in another.

One thing that stays the same is the CSS code for changing the color, font family and font size of text. Here is an example:

{ font-family: Courier,monospace; font-size: 20px; color: green; }

Of course, you can set the font family to any you want, you can change the font size to a different one and the color too. When it comes to colors you can type the name of the color but to be able to use different shades of the basic colors you have to use HEX values (e.g. color: #D2B48C;). Inserting this code by itself will not work. In front of the brackets with the code you have to put the element(s) to which the code will apply. The elements are defined in the HTML code, then these elements are used in the CSS code to style them in the desired way. Usually either classes or IDs are used to specify the various text elements. In CSS code classes begin with a dot (e.g. .entry-title), while IDs begin with # (e.g. #entry-title).

To be able to make the change you want you have to know how the element (e.g. site title, post title, post content) is defined in the HTML and CSS code. You can always browse through the code of the style.css file of the original theme. If you have the theme on your local computer you can use a text editor (e.g. Notepad, Wordpad) to browse through and edit the file. With most themes the file is divided into sections so that you can find the relevant code more easily. On your WordPress hosting account the path to the style.css file will be public_html/wp-content/themes/name-of-theme/style.css (assuming your WordPress is installed directly in the public_html folder). You can edit the file directly on your hosting account from the Files section of the Pixie control panel, or you can download it to your local computer with an FTP client (e.g. FileZilla), edit it with a text editor and upload it back overwriting the old file. The admin panel of WordPress also has a built-in editor for modifying files; to use it go to Appearance menu>Editor.

Of course, the style.css file could be quite big and you may find it difficult to locate the elements you need. One quick and easy way to find what you want is to use a web-browser tool for viewing HTML and CSS code of web pages. The browser Google Chrome has a built-in feature that allows you to do that. Just click with the right mouse button on an element on the page (e.g. a title), and then select Inspect element from the drop-down menu that appears. At the bottom of the screen a window will pop out showing you the code. On the left side you can see its HTML code (together with its class or ID, if it has one) and on the right you'll see its CSS code. Another such useful tool is the Firebug extension for Mozilla Firefox.

After you find how the particular element is defined you can insert it with the CSS code in the style.css file of the child theme. For example:

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

After you save the file you can refresh the frontend of your site to see the result. Even if it doesn't work at first you can try and test different combinations and code in the style.css file.

For additional information about particular text elements check out the following articles:

Was this answer helpful?

 Print this Article

Also Read