How to Change Sidebar Title Font, Size & Color

Blogger sidebar title fonts are very easily customizable like any other section. You just need to find the default CSS definitions of these titles and then we can easily implement our own styles in it.

Let's first check the default style definitions for these titles:

To find this code, go to Layout | Edit HTML and search.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

1- Change family i.e. Arial, Times New Roman etc.

Currently, sidebar title font is defined by font:$headerfont;. It means that your header font and sidebar title font is same but we can have them according to our wish by adding a font-family property.

h2 {
margin:1.5em 0 .75em;
font-family:"Times New Roman",Georgia,Serif;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Info: As you can see that I've added 3 fonts (Times New Roman, Georgia, Serif) because a visitor might not have the 'Times New Roman' font installed on his/her computer, so the browser can chose the other two fonts of first-come first-serve basis.

2- Change size.

Simply add font-size property in the default code.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
font-size:40px;
}

Note: I've added font-size:40px; in which 40px is the size. You can change it according to your wish because 40px is fairly large number.

3- Change color i.e. red, green etc.

Currently, color:$sidebarcolor; property is defining the color. It means that title color is dependent on the sidebar color i.e. sidebar color and title color is same. We can add our own color in it by removing color:$sidebarcolor; and adding color property.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:#0000FF;
}

Remember: #0000FF is the hex code of blue color.

Tip: You can capture any color on screen and get it's hex code to use it any where, download ColorPic which is a free utility to do that.