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.
Share this
Related Posts
10 Tips to Give Your Blog a Boost
When it comes to blogs most of them fall into the blah category. They are not good or bad, just boring. If you do not 
BEST Method To Truncate Posts In Blogger/BlogSpot BlogsThis post is important for all the bloggers, blogging on Googles Blogger platform. Whether you are presently using any 
7 Ways to Reduce Blog SpamA guest post by James Adams, editor and contributor to the CreativeCloud blog.
Bloggers know that dealing with spam ca
Add A Free Forum To Your Blogger/BlogSpot BlogI strongly recommend all the readers to bookmark this post. A forum is a must for every blog with increasing readership
45 comments
Write commentsHow are you awake at 3 in the morning?
ReplyI'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
ReplyThanks a lot for this post. As always, very informative and helpful. =)
mom earns online
Wow! This is very useful, thanks for the info
ReplyThey Should Add These Fonts In Blogger Post Editor.
ReplyThen It Will Be Very Easy To Use.
Thanks For The Information
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
Replyplz what i must to do?
That's good. We can use in our post this font? There are just few fonts available
I don't like them.
ReplyGreat fonts, thanks for the information !
Reply@Anonymous
ReplyHaha....I'm still a student buddy...of course my day can never end 12 midnight.
@angryeve
ReplyYeah dats true...using self hosted fonts, with copyright issues is a pain in d a**.
I'm glad the post helped you.
@Magali
ReplyYou are most welcome...
@Poras,
ReplyYeah 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.
@Ahmed,
ReplyYeah 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.
What font name do you use on your BloggerStop.net Divya? I like your post content font
ReplyAwesome font,very useful for my site...thanks
ReplyI will try to choose the best font for my blog, it seems that my blog isn't match with it's font.
ReplyWow, that's really useful. Is there anything Google doesn't do?
Thanks for the info.
ReplyThanks your info,,, i wil try...
ReplyYou are all welcome guys...hope these fonts are helping your blogs to look better!
ReplyI am getting the same problem as Ahmed. Just an error!
Reply@TheStricklandFamily
ReplyNotice the closing-slash, in Step #2, add that missing tag in the code line and it will start working, that's it.
This is that exact slash-tag:
Replycss' />
Great post. I didn't know we could change fonts when writing blogs. Thanks for sharing this information with us.
ReplyLOVE IT,,,,Thank You Soooooooooo Much
ReplyI really don't think I would be bloggin if it wasn't for you!!!
>:D< Heres a hug for all you do
ReplyGlad you liked my work
ReplyKeeping visitint and ask any of your doubts anywhere in this blog...& Gud luck for your new blog
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!
ReplyHey Fred,
ReplyThis 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'>
Thanks :X
ReplyAnd how to use it in header part ? I mean blog title
Reply
)
Replynice info and i'll try it...thnks
Replyvery nice step to make our blogs more beautiful.
ReplyHi. I followed all of your steps, including adding / before >, but the below error came out:
ReplyYour 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!
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.
ReplyBut i dunno how to apply the code for the title in the sidebar section. please help
Reply:-/ ~x(
ReplyChange this code in your blog:
Reply.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.
Yes! Yes! Yes!
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
ReplyI 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"" you can just put the name of the font there.
ReplySorry if it's already been said here
everytime i try i just encounter this error.
Reply' 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
I encounter the same error as igetit... any recommendations on that?
Replythanks for the tutorial!
Hi guys...Dare to try something different? Can grab this free new font here if you like.
Replyhttp://new.myfonts.com/fonts/layarbahtera/layar-bahtera/
WoW ! These new fonts look great, will use them on my blog
ReplyHello,
ReplyCan you use this technique when naming your pages... as in the page bar across the top??? I have tried and its not working..
Error parsing XML, line 1236, column 5: The element type "link" must be terminated by the matching end-tag "".
Replythis is the error i face plz give suggestions
Comments are moderated on this blog
Allowed HTML tags: <b>, <i> and <a>
Comment Like This! and Optimize your blog EmoticonEmoticon