Custom Font For Website From Google

A few days ago i have told you how to customise your font using your own ttf file font, just, at that post i didn't provide you any font to download/use. Now, to complete the tutorial here i gonna suggest you a good source that provides a lot fonts to use for your site, Google Web Fonts. I don't know if you're permited to download the font or not cuz i haven't tried it yet, but obviously you can grab a code to place on your website to replace the font you currently use. Here we go..

*First, of course you need to visit Google Web Fonts. Here it is: http://www.google.com/webfonts .
*After, you'll find some options to choose whether you want to display the fonts by popularity or another one. And here, i suggest you choose "Sort by Popularity", so you'll find a list of fonts which is displayed according to the downloaded the most.
*Decide which font you'd like to use on your site and then click "Add to Collection". There are also previews available for each font if you want to have a preview.
*Now click the button "Use" on botton right and you'll have a code to place on your website.

To place the code on your website, follow the steps below.

1. Loggin to your blogger.
2. Go to design.
3. Edit Html.
4. Now put the code you have right before the tag </head>. Just don't forget to add a "/" mark on the ending code. Here is an example:

<link href='http://fonts.googleapis.com/css? family=Droid+Sans' rel='stylesheet' type='text/css'/> </head>

5. You're almost done. Find the Css code for your body and add the following line onto the code: font-family: Droid Sans. Here is an example:

body {font-family:Droid Sans; background:#ffffff; width:1000px; text-align:center; font-size:12px; color:#333; margin:0 auto; padding:0;}

By placing the font-family:Droid Sans; property on your body, you'll have the whole text on your website execute the new font you've just added. Now if you find any code similar to the following, everywhere on your template, you can delete it (It code belongs to the old font): font: trebuchet, verdana, arial; .

Now you're done. Just check your website to make sure that your old font's changed. This way is much easier than the way i told on my previous post: Website Custom Font