Search This Blog

Wednesday, June 16, 2010

Add Beautiful Fonts in Blogger/Blogspot Blogs Using Google Fonts

You're probably already bored with the look of a simple font. change the font you want your blog / web you using a font that is more beautiful. way quite easily. you simply change the fonts contained in blog / your website with google fonts. for example, you can view "Cinta Sendal Jepit" blog.

How to Add Google Fonts in Blogger Blogs.
the way is very easy now.

  • You just choose the font you like here or go directly to Google Font Directory.
  • Select a font from the list there.
  • On the next page, click Get the code link.
  • You'll see some code which looks something like this:

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

This is the code we need but when I copied and used this code in Blogger, an error occurred. To deal with the error, you have to close the link tag by adding /(slash) right before > in the above code and it would look something like this:

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

So, whichever font you use, just add a / before > in the code of that font. For now, copy the above code and go to your Blogger account.

  • Go to Layout then Edit HTML tab and find . After that, paste the step 4 code right before tag. The result would look something like this:

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

After adding the code, save your template.

  • Now, we can use this font in headings and text. For example, if you want to use the web font in posts then use some code like this:

<span style="font-family: Lobster;">Any text here will be displayed by a web font like Lobster in this tutorial.</span>

quite easy. good luck.
You're probably already bored with the look of a simple font. change the font you want your blog / web you using a font that is more beautiful. way quite easily. you simply change the fonts contained in blog / your website with google fonts. for example, you can view "Cinta Sendal Jepit" blog.

How to Add Google Fonts in Blogger Blogs.
the way is very easy now.

  • You just choose the font you like here or go directly to Google Font Directory.
  • Select a font from the list there.
  • On the next page, click Get the code link.
  • You'll see some code which looks something like this:

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

This is the code we need but when I copied and used this code in Blogger, an error occurred. To deal with the error, you have to close the link tag by adding /(slash) right before > in the above code and it would look something like this:

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

So, whichever font you use, just add a / before > in the code of that font. For now, copy the above code and go to your Blogger account.

  • Go to Layout then Edit HTML tab and find . After that, paste the step 4 code right before tag. The result would look something like this:

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

After adding the code, save your template.

  • Now, we can use this font in headings and text. For example, if you want to use the web font in posts then use some code like this:

<span style="font-family: Lobster;">Any text here will be displayed by a web font like Lobster in this tutorial.</span>

quite easy. good luck.
About the Author : Andra Permana Halim. Bekerja pada Sebuah ISP terbesar di Indonesia. Sangat menyukai Semua hal di bidang Informatika. Sesekali menulis Tentang Keseharian dan wawasan yang banyak di jumapainya.

Your Friend's Comment !!!

Site Meter PageRank Checking Icon