New Fonts For Blogger Blogs | Google Web Fonts

Last Wednesday Google launched a set of new web-fonts, fonts which can be used anywhere on any website freely. The Google Font API allows you to use all these fonts in your own blog.

Check out this new font as an example:

New Fonts For Blogger

So, how to use these fonts on your blog?

For every new font you want to add to your blog, you simply have to paste a single line of code in your blog's template. Once you are done with it, remember the name of the font and use it anywhere in your blog (in any post or part of a post or in your widgets).

Steps to add a new font:

STEP #1
Visit this page: Google Webfonts Directory

and click on the font you want to use.

STEP #2
In the next page, select the blue colored tab "Get the code".

And copy the FIRST code.
IT will look something like this:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css' />
The code highlighted in RED, is the name of that font. You have to either remember this, or save it in a textpad/notepad.

STEP #3
Now, log in to Blogger, go to Layout/Design and then click on the Edit HTML link.
Find this code in your template:
</head>

And immediately ABOVE/BEFORE it, paste the code which you got in STEP #2.
And save the template.

STEP #4
Now, whenever you want to use that font in your blog (either in posts or in widgets), simply use this code tags around the text:

<span style="font-family: Tangerine; font-size: 24px;">YOUR TEXT/POST HERE</span>

The font family name (highlighted in RED), should be same as written in STEP #2. You may also adjust the font-size. Replace the text highlighted in BLUE with whatever text you want.

That's it, now you can deliver your posts in a new style. As Google says, make your blog and the web more beautiful...


Browsers compatibility:
* Google Chrome: version 4.249.4+
* Mozilla Firefox: version: 3.5+
* Apple Safari: version 3.1+
* Microsoft Internet Explorer: version 6+

This project is an open source project, just like many other projects by Google. For more details on these WebFonts you may visit the FAQ page.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

49 comments

Write comments
Anonymous
May 23, 2010 6:28 PM delete

How are you awake at 3 in the morning?

Reply
avatar
May 23, 2010 7:17 PM delete

I'm sure a lot will be happy hearing about this. I've been dying to have new fonts to use without the need to upload a font type to my own server. hehe

Thanks a lot for this post. As always, very informative and helpful. =)

mom earns online

Reply
avatar
May 24, 2010 12:17 AM delete

Wow! This is very useful, thanks for the info

Reply
avatar
May 24, 2010 2:28 AM delete

They Should Add These Fonts In Blogger Post Editor.
Then It Will Be Very Easy To Use.

Thanks For The Information

Reply
avatar
May 24, 2010 3:40 AM delete

This is very useful,but i have problem when put the code in step2 i get this massage XML: The element type "link" must be terminated by the matching end-tag
plz what i must to do?

Reply
avatar
May 24, 2010 7:09 AM delete

That's good. We can use in our post this font? There are just few fonts available :( I don't like them.

Reply
avatar
May 24, 2010 8:59 AM delete

Great fonts, thanks for the information !

Reply
avatar
May 24, 2010 9:03 AM delete

@Anonymous
Haha....I'm still a student buddy...of course my day can never end 12 midnight.

Reply
avatar
May 24, 2010 9:15 AM delete

@angryeve

Yeah dats true...using self hosted fonts, with copyright issues is a pain in d a**.
I'm glad the post helped you.

Reply
avatar
May 24, 2010 9:16 AM delete

@Magali

You are most welcome...

Reply
avatar
May 24, 2010 9:18 AM delete

@Poras,

Yeah that would be very helpful for people working on Blogger, this project is still in the Beta phase, so I hope in future Blogger may take that initiative.

Reply
avatar
May 24, 2010 9:19 AM delete

@Ahmed,

Yeah there's a mistake in that code, actually there should be a closing slash-tag in that code, thanks for reporting the error, I 'll the post now.

Reply
avatar
May 24, 2010 12:59 PM delete

What font name do you use on your BloggerStop.net Divya? I like your post content font :)

Reply
avatar
May 25, 2010 1:18 PM delete

Nice blog & good post. You have beautifully maintained it, you must try this website which really helps to increase your traffic. hope u have a wonderful day & awaiting for more new post. Keep Blogging!

Reply
avatar
May 25, 2010 8:29 PM delete

Awesome font,very useful for my site...thanks:)

Reply
avatar
May 26, 2010 5:11 AM delete

I will try to choose the best font for my blog, it seems that my blog isn't match with it's font.

Reply
avatar
May 29, 2010 2:11 PM delete

Wow, that's really useful. Is there anything Google doesn't do? :) Thanks for the info.

Reply
avatar
June 12, 2010 5:25 AM delete

Thanks your info,,, i wil try...

Reply
avatar
June 15, 2010 11:43 AM delete

You are all welcome guys...hope these fonts are helping your blogs to look better!

Reply
avatar
June 16, 2010 1:05 AM delete

I am getting the same problem as Ahmed. Just an error!

Reply
avatar
June 16, 2010 9:14 AM delete

@TheStricklandFamily

Notice the closing-slash, in Step #2, add that missing tag in the code line and it will start working, that's it.

Reply
avatar
June 16, 2010 9:15 AM delete

This is that exact slash-tag:

css' />

Reply
avatar
Sam
June 19, 2010 2:30 AM delete

Great post. I didn't know we could change fonts when writing blogs. Thanks for sharing this information with us. :)

Reply
avatar
June 28, 2010 10:41 AM delete

LOVE IT,,,,Thank You Soooooooooo Much
I really don't think I would be bloggin if it wasn't for you!!!

Reply
avatar
June 28, 2010 11:18 AM delete

Glad you liked my work :)
Keeping visitint and ask any of your doubts anywhere in this blog...& Gud luck for your new blog :)

Reply
avatar
July 07, 2010 3:06 AM delete

How can i make one of these fonts as my post title font? I can't figure out where to put the code. and im getting frustrated! haha please help!

Reply
avatar
July 07, 2010 2:05 PM delete

Hey Fred,

This is the single line of code, which when added to any part of your blog, will change its font:
style="font-family: Tangerine; font-size: 24px;"

So, find this code in your blog:
<h3 class='post-title entry-title'>

And edit it, like this:
<h3 style="font-family: Tangerine; font-size: 24px;" class='post-title entry-title'>

Reply
avatar
Anonymous
August 13, 2010 4:48 PM delete

And how to use it in header part ? I mean blog title

Reply
avatar
August 18, 2010 11:38 AM delete

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Reply
avatar
September 14, 2010 7:42 PM delete

nice info and i'll try it...thnks

Reply
avatar
September 20, 2010 7:11 AM delete

very nice step to make our blogs more beautiful.

Reply
avatar
October 04, 2010 5:58 AM delete

Hi. I followed all of your steps, including adding / before >, but the below error came out:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "subset" must end with the ';' delimiter.

Please help. Thanks!

Reply
avatar
January 10, 2011 9:46 AM delete

The comments here are like FAQ. I encounter same problem like Ahmed but after refer your answer, i got a fix. Thanks for sharing. This is good.

Reply
avatar
January 10, 2011 10:47 AM delete

But i dunno how to apply the code for the title in the sidebar section. please help

Reply
avatar
January 10, 2011 11:41 AM delete

Change this code in your blog:

.sidebar .widget h2 {
text-shadow: 0 0 -1px #000000;
}


to this:

.sidebar .widget h2 {
text-shadow: 0 0 -1px #000000;
font-family: Tangerine;
font-size: 24px;
}

PS: Of course, change the font name and size according to the one you are using and the size you want.

Reply
avatar
January 10, 2011 9:50 PM delete

Yes! Yes! Yes! :D thank you. it's working. BTW, you are very efficient with you readers. Thumbs up! Now I have link you back to my blog link directory

Reply
avatar
April 08, 2011 6:12 PM delete

I don't mean to be a buzz kill or whatever, but when composing your post, if you click "Edit HTML" next to where it says "compose" - on the second line where it says ""FONT NAME&quot" you can just put the name of the font there.
Sorry if it's already been said here :)

Reply
avatar
June 16, 2011 2:04 PM delete

everytime i try i just encounter this error.

' Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The reference to entity "v1" must end with the ';' delimiter. '

please help

Reply
avatar
July 06, 2011 11:43 AM delete

I encounter the same error as igetit... any recommendations on that?
thanks for the tutorial!

Reply
avatar
Anonymous
October 23, 2011 1:00 PM delete

Hi guys...Dare to try something different? Can grab this free new font here if you like.

http://new.myfonts.com/fonts/layarbahtera/layar-bahtera/

Reply
avatar
November 09, 2011 2:20 AM delete

I was looking at you wbsite,Michael Vick Jersey which is wonderful, and noticed that you have a postcard published by my cousin, Mathew Gardner. I am currently researching our family history and wondered if you had Authentic NFL Jerseys Cheap the original postcard and any other information whih has not been published on your website.

I have some information which I would be happy to furnish if you wish to get in touch.Cheap Steelers JerseysLooking forward to hearing from you.
Eagles Jerseys
Cheap Eagles Jerseys
Authentic Eagles Jerseys
Philadelphia Eagles Jerseys
Custom Eagles Jerseys
Official Eagles Jerseys
Eagles Throwback Jerseys
Kids Eagles Jerseys
Womens Eagles Jerseys

Reply
avatar
November 10, 2011 1:46 PM delete

WoW ! These new fonts look great, will use them on my blog :)

Reply
avatar
April 18, 2012 3:54 PM delete

Hello,
Can you use this technique when naming your pages... as in the page bar across the top??? I have tried and its not working..

Reply
avatar
May 25, 2012 2:30 AM delete

Error parsing XML, line 1236, column 5: The element type "link" must be terminated by the matching end-tag "".


this is the error i face plz give suggestions

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon