Free fonts for your blog. Sound good? Google have Google Web Fonts, a collection of around 500 fonts that can be used on your blog for free. Whether you are looking for a font for the body text in your blog or simply something a bit different for your post and widget titles Google Web Fonts is well worth a look.

Here are some examples of sites that I have used Google Web Fonts with:

Bake Yummy – Here I used Lobster 2 for the Headings and for the body text I used Open Sans Condensed.

It’s Just My Cup Of  - Here I changed the font to Amatic SC.

In this tutorial I will show you how to install a font form Google Web Fonts to your blog.

Download the plugin WP Google Fonts and install it you your blog. Upon activating a message will appear saying that you need to install ‘Option tree‘ plugin and ‘click here to automatically install‘ , do this and activate the plugin.

Go to your WordPress dashboard -> Plugins. Find WP Google Fonts and click Settings. From here you can set any of the Google Web Fonts for up to 6 font options on your blog, you will see this:

Elements you want to assign this font to:*

 All (body tags)  Headline 1 (h1 tags)  Headline 2 (h2 tags)  Headline 3 (h3 tags)  Headline 4 (h4 tags)  Headline 5 (h5 tags)  Headline 6 (h6 tags)  Blockquotes  Paragraphs (p tags)  Lists (li tags)

All (body tags) will change the main text that your blog uses, so the text in posts and pages etc.

H1, h2, h3, h4 h5 and h6 are your Heading tags. These affect things like post titles, pages titles etc but this may vary slightly from theme to theme.

Blockquotes , paragraphs and list tags should be self explanatory.

Play around! From the drop down list within the plugin settings you will find a multitude of fonts. The easiest was to find a font is to go to Google Web Fonts in a new window, find the font you like and note it’s name and then look for it in the drop down list with the plugin setting.

Should you try a font and it’s too big or too small, or you would like it’s colour changed, or it turned to bold or italic and such tweaks then you can do that directly from within the plugin settings.

Please note that this does not permanently change the css on your blog theme – if you change your mind or don’t like the changes you make you can go back to the plugin settings at any time and delete your changes and your blog will return back to it’s origional look.

Under each choice of font you will see this box:

Below you will find some basic CSS that you can use to make some standard text changes that you may find you need to do. The pink bits are the bits that you will need to change to suit your needs and the blue bits are just notes to help you and are not part of the css so please don’t copy them:

An example of altering a H1 attributes:

h1{   *Always open the section with the name of what you are changing eg. body and this -> {*

font-size: 30px;       *Can also be set in .em if you prefer*

font-weight: bold;   *Set to normal if you don’t want bold*

line-height: 35px;    *This is the height of the line that your text sits in, set it higher than your font size for more space           between lines*

text-transform: uppercase;   *This transforms the text, Uppercase = CAPITALS, Lowercase = all small letters, Capitalize  = Capital letter at the start*

letter-spacing: 2px;  *This  marks the gap between letters, this doesn’t need to be set as standard but it you want  more spaced out lettering you can use it*

color:#00ff00; *This sets the colour of the text and it’s spelt the American way ‘color’. To find out the right code for the colour you like you can check out sites like Computer Hope’s HTML Color Codes and HTML Color Codes (this second one has a colour picker if you scroll down which is super handy).*

text-align: left;  *Can be set to left, right, center or justify*

}  *Be sure to close off the section with that!*

You can play around with fonts on your blog using this plugin as there’s no risk of you making changes that cannot be reversed completely. If you do make changes within the plugin it’s always worth making a copy of the html code that you do use and saving it, in Windows Notepad for example.

I hope that you find this post useful! Please do note that I am not an expert on CSS and I am simply passing on knowledge that I have learnt as I have gone along in the past few months. If you spot a mistake or spy that I am giving some duff advice please do get in touch to let me know – I’d be most grateful!  I can be emailed at loveallblogs@gmail.com.