Free fonts for your blog

Are you not satisfied with the fonts that is available for your blog? If so, you may want to check out
http://www.virtualhosting.com/blog/2007/100-legal-sources-for-free-as-in-beer-fonts
100 Legal Sources for Free (as in Beer) Fonts. I have not tried it as I am not a big fan of fancy fonts and is quite satisfied with what I have, so I cannot vouch for what is available in that site. But if you like fancy fonts, give that site a try.

As to how to use it, if you don't know, ask, perhaps I will answer with another post. That is for the future

Changing fonts and colors for New Blogger

It is now very easy to change the fonts and colors of various things in your New Blogger blog. You don't need to tamper with the template. You can do it direct from the LAYOUT.

Sign into blogger.com (Dashboard). You will see a list of all your blogs. Click LAYOUT for the relevant blog. Then click the FONTS AND COLORS sub-tab. See screenshot below:



Say, you want to change the font for the Header. Scroll down till you see "Page Header Font". On the right, you will have the radio button to chose the font family and further to the right, you can change the font style to bold or italic. There are also linls to change the font size to "bigger" or "smaller"

Change font size of blog footer

I did a test blog Test Footer Font Size. Note the size of the fonts in the footer.

---

The instrutions below will involve scanning through long line of codes in a template. See section on how you can find code easily at the bottom of the post if you have difficulties. Also, before you do anything to the template, always backup your template PLUS the Page Elements. See
Backup New Blogger template PLUS Page Elements and change template

Backup New Blogger template PLUS Page Elements and change template

Amazon computer products

---

To change the footer font size, sign into blogger.com (Dashboard). Click LAYOUT for the relevant blog, then under the TEMPLATE tab, click the EDIT HTML sub-tab. Look for block of codes that may look something like this (the exact code will depend on template. The one below is for the Blogger Minima template):

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Just add a line

font-size: 400%;

so that the block of codes become

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
font-size: 400%;
}

Preview and if everything seems OK, click "Save template".

NOTE: The font size can be in % or px (pixels). You may also use 250% or 18px. Experiment, preview until you get what you want before you save the template.

How to easily locate the code you are looking for

To make your task of scanning the long lines of codes in the template, press ctrl+F and a Find [ ] will appear at the left of bottom of the browser. Tpye all or part of the code you are looking for and the scrollbar will scroll down to the part where the code is located and highlight it. See screenshot below:



Do all the necessary editing and preview. If everything seem OK, click "Save template" and VIEW BLOG" to ensure everything is OK

If this method don't work, click on the inside of the template editor window and press ctrl+A (or right-click and chose "Select all") to highlight all the template. Click ctrl+C (or right-click and chose "copy") to copy the template into clipboard, open a Notepad file, click ctrl+A again (or right-click and chose "Select all"), then click EDIT > FIND in the menu bar of Notepad at the top (or press ctrl+F), and in the "pop-up" FIND box, type or copy all or part of the code into the box and click "Find Next" and again the code you are looking for will be located and highlighted (see screenshot below):



Do whatever editing you need to do, then press ctrl+A (or right-click and chose "Select all") to highlight all the edited template in Notepad to copy into clipboard. Go back to the template editor. The whole unedited template should still be highlighted. Click the DELETE key and the template editor window will become empty. Paste the edited template into the empty template editor window, preview, then save.

---

Change blog title from all uppercase to only first alphabet uppercase

The previous post Change blog title from all uppercase to all lowercase or vice-versa (click BACK button to get back to this page). This post will describe how to change a blog which has its blog title all in all uppercase to only the first alphabet of a word in uppercase, with the rest in lowercase.

This has been tested on the blog Natural Remedies which you will notice have only the first alphabet of the blog title and description in uppercase. Previously, the blog Header looked like this:



This was how the blog title and description was changed to only the first alphabet in uppercase. Before you do anything with the template, it is always wise to backup your current template PLUS the Page Elements as described in Backup New Blogger template plus Page Elements and edit template. When you are finished with what the above post instructed, you will still be in the template editor. Look for this block of codes:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Add a line

p:first-letter

to the block of codes so that it become

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
p:first-letter
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

For the blog description, look for this block of codes:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Just as above, add the line

p:first-letter

so that the block of codes become

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
p:first-letter
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Preview, and if everything is OK, save the template.

NOTE: Both the examples in the previous post Change blog title from all uppercase to all lowercase (click BACK button to get back to this page) and this post use New Blogger Minima template modified to 3 column by Hackosphere (click BACK button to get back to this page). If you are using a different template, the codes may be different or the particular lines may be missing altogether. If so, just add the necessary lines in.