Changing the sidebar font

Got a question from a blog reader on how to change the sidebar font. So I did a little testing. See the screenshot of original font in the sidebar of this blog (click on screenshot to enlarge it):



I believe the original font is Arial. Now see the screenshot after editing the template (as above, click on screenshot to enlarge it):



Note that the font has been changed to Times (you got to see the enlarged screenshot to see the difference, or surf over to Taman Sentosa to see the actual site.

This is the way to do it. This involves opening the template editor and as always, backup the template before you make any changes. If you are not familiar with that, see the instructions at Backing up and changing New Blogger template.

After you have opened the template editor, in the template editor window, look for this block of codes in the CSS:

.sidebar {
color: $textColor;
line-height:1.3em;
}

Add in a line for the new font, for example, if you want Times, add the line

font-family: times;

so that it becomes

.sidebar {
color: $textColor;
line-height:1.3em;
font-family: times;
}

Preview, and if satisfied, click "Save template".

Update: I was asked about changing the font size too. If you want to do that, just add the line

font-size: 150%;

or any other percentage as you wish. You may also specify in pixels (px), eg. 12px

.sidebar {
color: $textColor;
line-height:1.3em;
font-family: times;
font-size: 150%;
}

Of course, if you want other font, just use a different font. BTW, I have changed the font size of the sidebar of the blog Taman Sentosa

Books for Google Blogger