Monday, November 29, 2010

| by Posted by c3gh4p


How to change your font at blogspot using Google Font Directory

Do you recognize recently people like to change their blog font from the standard font to the coolest and nicer font? If your are using Wordpress maybe it is normal because Wordpress already have plugin that support font changing. This is a good news for blogger platform user. Recently google has launched a new service/application which let us easily change our font in any blog named Google Font Directory. Interesting right? This service is powerd by JavaScript code which is hosted by google. Good for blogger platform user which dont have a own hosting. For now, there are only 18 fonts available. But we can expect there are more to comes since this service is still in beta release. For example to the font is like this : This font is cool right?. Interested?

Here i show you how to make it:

1- Go to Google Font Directory.

2- You will see the font list. Choose which one you like. For the font like i show before it was "Lobster" font.

3- After you have choose it, you will landed to the new page. Click on "Get the code" link.

4- You will see the code like this:
<link href='' rel='stylesheet' type='text/css'>

5- To add this to blogger platform blog, you need to modify this code a little bit. Just remove the "&subset=latin" form the code and add /(slash) at the end of the code before >. You will get the code like this:
<link href='' rel='stylesheet' type='text/css' />

6- Open your blogger Dashboard --> Design--> Edit HTML and find(ctrl+f) </head> and place the code just before the </head> and then save it.

7- Now your site is ready to use this custom font!

Use of the code:

If you want to add it in your post just simply use this code:
<span style="font-family: Lobster;">I am the lagendary ceghap.</span>

and the result is like this:
I am the lagendary ceghap.

If you like to change your post title font you need basic css knowledge. I will show you some, But i don't know if you understand or not. If you want to try this make sure you backup your template first :)

1- Open your Dashboard --> Design --> Edit HTML. And find(ctrl+f) "h3" or "h2" depends on your template.

The code will look like this maybe:
h2, h3
  margin: 0;

Then just add the css to this code:

h2, h3
  margin: 0; font-family: 'Lobster', arial, serif;

If you can understand the css well. you can modify most of the font at your blog. the basic code is like this:
h1 { font-family: 'Lobster', arial, serif; }

No comments:

Post a Comment