New Fonts For Blogger Blogs | Google Web Fonts

New Fonts For Blogger Blogs | Google Web FontsLast 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“.

New Fonts For Blogger Blogs | Google Web Fonts

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…

New Fonts For Blogger Blogs | Google Web Fonts

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.

Leave a Reply

49 Comments on "New Fonts For Blogger Blogs | Google Web Fonts"

Notify of
avatar
Sort by:   newest | oldest | most voted
Anonymous
Guest

How are you awake at 3 in the morning?

View Comment
Angryeve
Guest

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

View Comment
Magali
Guest

Wow! This is very useful, thanks for the info

View Comment
Poras
Guest

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

Thanks For The Information

View Comment
ahmed
Guest

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?

View Comment
Hack Tutors
Guest

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

View Comment
ε₯‡ι—»ζ€ͺδΊ‹
Guest

Great fonts, thanks for the information !

View Comment
Sai - Blogger Widgets
Guest

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

View Comment
Sai - Blogger Templates
Guest

@angryeve

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

View Comment
Sai - Blogger Help
Guest

@Magali

You are most welcome…

View Comment
Sai - BloggerStop.Net
Guest

@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.

View Comment
Admin - BloggerStop.Net
Guest

@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.

View Comment
Anup@Hack Tutors
Guest

What font name do you use on your BloggerStop.net Divya? I like your post content font πŸ™‚

View Comment
Claudia Lawrence
Guest

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!

View Comment
Technolic
Guest

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

View Comment
Nikon S210
Guest

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

View Comment
Matthew Schrager
Guest

Wow, that's really useful. Is there anything Google doesn't do? πŸ™‚ Thanks for the info.

View Comment
Masda
Guest

Thanks your info,,, i wil try…

View Comment
Divya Sai
Guest

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

View Comment
TheStricklandFamily
Guest

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

View Comment
wpDiscuz