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.
49 comments:
How are you awake at 3 in the morning?
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
Wow! This is very useful, thanks for the info
They Should Add These Fonts In Blogger Post Editor.
Then 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
plz 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.
Great fonts, thanks for the information !
@Anonymous
Haha....I'm still a student buddy...of course my day can never end 12 midnight.
@angryeve
Yeah dats true...using self hosted fonts, with copyright issues is a pain in d a**.
I'm glad the post helped you.
@Magali
You are most welcome...
@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.
@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.
What font name do you use on your BloggerStop.net Divya? I like your post content font :)
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!
Awesome font,very useful for my site...thanks:)
I will try to choose the best font for my blog, it seems that my blog isn't match with it's font.
Wow, that's really useful. Is there anything Google doesn't do? :) Thanks for the info.
Thanks your info,,, i wil try...
You are all welcome guys...hope these fonts are helping your blogs to look better!
I am getting the same problem as Ahmed. Just an error!
@TheStricklandFamily
Notice 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:
css' />
Great post. I didn't know we could change fonts when writing blogs. Thanks for sharing this information with us. :)
LOVE IT,,,,Thank You Soooooooooo Much
I really don't think I would be bloggin if it wasn't for you!!!
>:D< Heres a hug for all you do
Glad you liked my work :)
Keeping 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!
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'>
Thanks :X
And how to use it in header part ? I mean blog title
:))
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))
nice info and i'll try it...thnks
thanks for info
very nice step to make our blogs more beautiful.
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!
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.
But i dunno how to apply the code for the title in the sidebar section. please help
:-/ ~x(
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.
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
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"" you can just put the name of the font there.
Sorry if it's already been said here :)
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
I encounter the same error as igetit... any recommendations on that?
thanks for the tutorial!
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/
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
WoW ! These new fonts look great, will use them on my blog :)
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..
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
Allowed HTML tags: <b>, <i> and <a>
Join and share your views with other bloggers at BloggerStop Community
Comment Like This! and Optimize your blog...
SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com