Okok. So you want to change your *entire* posts to a funky font. Well, it can be done… Sort of.. I can’t figure out an easy way to change the font of your existing posts, but it can be done for any new posts you write.
click here to see a live demo of what this tutorial does
First- the boring stuff. Disclaimers. Warnings. Etc.
- This tutorial is a continuation of my How To Use a Cute Font for Your Blogger Post Titles, so you’ll have to do all the stuff in that tutorial before this one will work. :)
- I don’t really recommend writing every single post, all the time, the entire thing, in a custom font.
- sIFR is best used for changing titles and headers, not entire blocks of text.
- It will make your page load slower.
- It will make your page be all jumpy and crazy-looking as it’s loading.
- It won’t look perfect- you can only use one font color/size for everything you write and there may be some extra spacing/padding at the bottom, but there’s no that I know of to get rid of it (see what I mean about the padding on the demo).
- I kinda like plain, easy to read fonts for the main content of a blog anyway.
- If you created an account with Geocities, be sure and read this!
So! If that doesn’t bother you and you’re totally ok with all of that and you still really want to change the font of your entire blog posts… Then this tutorial is for you. :)
First, if you want to use a second font, different from your post titles for your main blog posts… Go to your blogger-sifr.js file and find the lines that look something like this:
var kevinandamanda = {
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);
Copy and paste a duplicate of that right underneath it.
1. Convert and upload a new SWF font file, then replace the URL for the current SWF file with the URL to the new font.
2. Change the two instances of kevinandamanda to blogpostfont.
So when you’re done, it may look something like this:
var kevinandamanda = {
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);
var blogpostfont = {
src: 'http://username.webs.com/anotherfont.swf'
};
sIFR.activate(blogpostfont);
Next, paste this down at the bottom of your blogger-sifr.js file:
sIFR.replace(blogpostfont, {
selector: '#main-wrapper h3',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #000000; font-size: 24px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #000000; }'
,'a:hover { color: #000000; }'
],
wmode: 'transparent',
ratios: [6, 1.93, 10, 1.92, 13, 1.86, 17, 1.82, 21, 1.8, 29, 1.79, 32, 1.78, 33, 1.77, 36, 1.78, 43, 1.77, 44, 1.76, 47, 1.77, 70, 1.76, 71, 1.75, 74, 1.76, 75, 1.75, 76, 1.76, 1.75]
});
Now if you didn’t use a second font and just want to use the same font you’re using for your blog post titles, then you’ll need to change blogpostfont back to kevinandamanda.
You can still play around with the font size and color.
Save the blogger-sifr.js file when you’re done customizing.
Next, to get this to show up on your blog: Write a new post and switch over to the Edit Html tab.
Wrap any text that you want to appear in your custom font with <h3> tags, so it might look something like this:
<h3>This text will be converted to a cute font!</h3>
This text will appear in the default blogger font.
That’s it! :)
click here to see a live demo
I will try and answer questions in the comments. (Please leave a link to your blog, or send me an invite if it’s private.)
If you got this to work on your blog, please post a link to your blog here so others can see an example! :)
If you found this tutorial helpful, I’d love it if you put one of my blog buttons on your blog! :)
Thanks for the tutorial! Here are a couple of other tutorials I have found to be somewhat helpful when changing blog post fonts. You do have to use a universal font though and can’t use the custom ones. (I hope it’s ok to post links to other sites here…if not, you can delete this!)
http://thecutestblogontheblock.com/blog-secrets/147-how-to-change-font-on-your-blog
http://sjhblogdesign.blogspot.com/2008/06/i-am-always-getting-asked-question-how.html
Hey Shelley, those are great links, thank you for posting those. :)
Those are great tutorials (and I would recommend using them) if you want to do all the things sIFR can’t. Like:
1. Change the fonts on ALL posts (even existing ones) without having to add < h3 > tags around the text you want to change.
2. You don’t want the page to be jumpy or load slowly
3. You want to be able to use more than one font color and size.
etc.
Like Shelley said, there’s only a limited number of fonts you can choose from, but they’ll all pretty easily readable and are good for the main content of a blog.
But if you do want to use your own, custom font, and you want everyone to be able to see it, even if they don’t have it installed on their computer, then this is the tutorial for you. :D
click here to see an example
of someone who’s changing the font of their entire posts using this tutorial! :)
Thanks again Amanda, good work!
One curious side-effect I now have is that prior to the custom font loading, my page first appears with the characters in the parameter huge and garish.
Any ideas what might be causing it?
Take a look at my test post here: http://campmiserable.blogspot.com/2009/04/last-word-on-fonts-i-hope.html
Good point, Roadshow. In the Blogger Dashboard, go to Layout, then Edit HTML and find </head>, and find where you pasted the other three lines of code. Then paste this code right above that:
<style type='text/css'>
#main-wrapper h3 {
color: #000000;
font-size: 12px;
text-align: left;
}
</style>
With that you can style the color, size and alignment of the Blogger font before the custom font loads.
Thanks Amanda, that has cracked it. You are an out and out blogger star!
Hi Amanda,
I use the thecutestblogontheblock tutorial to change my blog post fonts and use your original tutorial for all the rest of the font on my blog!
Thanks for all the awesome help, I love your site!
Alyson
http://www.chasethepuggle.blogspot.com
Hi, I just found your blog while doing a search for fonts. Your website is wonderful I’m glad I found it. I will be back. :)
it doesn’t work for me or maybe i paste the thing at the wrong part? I’m still confuse where to paste when you said ” Next, paste this down at the bottom of your blogger-sifr.js file ” which part actually? :D
AWESOME tutorial!! I can’t seem to get it to work for me on my self hosted wordpress blog. Stupid thing! It’s probably just because I’m super sleepy! :P
Thank you so much for this tutorial! I didn’t think it was possible to do this.
Great tutorial! What about adding a custom signature to each post?
Hi Aamanda and Kevin, I had a look on your tutorial and I have to confess it’s not difficult but requires a lot of work!!!!!(and time!), what I usually do to my title and links is simply create an image with photoshop, for example, and upload the new image-title with the font I want to use. Its much easier, as Im a bit lazy to work with scripts.
Thank you for the tutorial anyway, Im sure there are lots of people who can do that from your little class here.
Wonderful design by the way, I love the delicate style you both gave to your blog.
A big hug from new Zealand
Hello!
Thank you for the great tutorial!:-) I am looking forward to doing it, in hopes of ‘re-vamping’ my blog.
I have a question though. I am still using the old blogger platform (since I am more confortable with css) so the font-changing work on my layout?:-/
Hi Amanda!!
Thanks so much for your awesome website and advice!! I have redesigned my page with all of your advice. I LOVE it!! Here is a link to my page : http://a-box-of.blogspot.com/
Thanks again,
Christine
WOW thank you so much! I wrote you a little bit ago and it wasn’t working for me but I decided to try it again this morning and it totally worked! I’m really excited. Not only did it work but I was “carefully” messing around on my blog and figured out how to change all the fonts! :) YAY! I’m really excited!
HELP! I just switched over to blogger and i discovered your great site. I have been messing around with the fonts. I’m having trouble with the blog post font. I have gone through your instructions from scratch. I an trying to use yout pea lauryn but it is not working. It turned my font color orange and to another font that was not pea lauryn. Can you help? I have done coding before but I am stumped. I hope you can help me before I have to redo everything. Thanks in advance. Katie
http://lifewithparis.blogspot.com/
This is a great tutorial! I’ve had several people ask me how I got the cool font on my blog titles and I always refer them back to you.
Thanks for all you do!
♥ xtine
http://www.stuffbyxtine.com
Hello, very useful stuffs , i really like it, and soon i will edit my blog’s font.
amanda- you are so great! thanks for all the fonts and such! i am having a REALLY hard time trying to get a font to use for my blog. i have tried doing it a few times, and for some reason i just CANT figure it out! i dont know if there is anything you can do to help?!?
Hi I was wondering if there is any way i could make the font have a black fill?
i.e If you highlighted it?
Is there anyway this could be done?
Dear Amanda,
I did what the tutorial said but the font doesn’t change to my custom one. I am using the same one as the titles but nothing happneds when I add the and , do i need to add something to the Edit HTML part of my blog? Please reply ASAP. Thanks.
1. LOVE the fonts!!!!
2. I added the fonts to my blog and did the tutorials, but can’t figure out how to get it to change the font on my sidebar…help!?!!
My blog is private, so I will send you an invite.
THANKS!
Thanks a bunch! I was able to use this for a blog post where I just wanted a portion of it to be in the same font as the title! Now I can use it whenever I want, hee hee!
Here’s the blog post”> I’m talking ’bout!
Thanks again!
~TattingChic :)
Hey Amanda! I just found your website today and have been tweaking my blog at every chance! I’ve just been having a problem adding the blog spot font. I’ve tried the pea squeaker and a little pot, and all it does is change the font to something else and the font color to orange. Can you help me?!?!
I still can’t get it right! I can’t figure out what I’ve done wrong! I have redone everything three different times, maybe i’m putting something in the wrong spot, I don’t know. I’m able to get the blog titles to work right, but i cant get my blog font, the sidebars or the date to work right! Can you help me!!!
Is it by chance possible to change the font of the text in the sidebars? Not just the titles?
It worked great! I love it. I did the font on just my titles, but now I can’t seem to change the color of the font on the sidebar titles. I’ve tried everything to change it, but it is bright pink… doesn’t match my layout. Any ideas???
I absolutely love your fonts! I have used them for about a year now, but just downloaded all of them. They are so much fun! I teach high school and use power points quite often – so it is great to have some new fonts to add a little creativity!!
I started a blog and have used your tips to change the fonts. It worked wonderfully! My only question is – I put pictures in the middle of my post and on the preview they show up, but when I actually publish the blog the pictures don’t show up. Is there a way to fix this?
Thanks a bunch and deep up the great work!!
Thanks Amanda – worked a treat!
Thank you so much for this! My blog has been pretty blah for a while and this was just what it needed!
One question. How can I change the font on the entire page? Or at least my sidebar font?
these are great tutorials! i am updating my blog and trying to get the “footer” area to show up in the cute font i used from your fonts. i cannot get it to show up (the part that says “life isn’t about waiting for the storm to pass …. ” ) … also is there a way for the font to show up in my blog title and the part that says “the rauths?” any help you might be able to lend, I’d greatly appreciate. Thanks!
I cannot get my font to turn into a SWF font file and I am totally lost……I would really love to use a font but I am hing up on that one tiny part. Any help would be appreciated!!!
I’m extremely proud of myself for changing the post titles and dates to a new font with the help of your great tutorial, but somehow I am not able to manage this one? Am I missing something? Should I paste something into my blog’s HTML template?
Please help?
Silly me didn’t save it correctly! Thanks so much for all the beautifull fonts!
Thanks for your great tutorials! I was able to change the fonts for my sidebar and post titles as well as my blogger postings. Is there a way to change my other sidebar fonts?
How do I add doodles to my site?
Thanks again Amanda for your great tutorials. It’s working on my blog, but some error occurred… do you know how to fix this??
http://claustrawberryfragariavesca.blogspot.com/2009/10/try-out-post.html
Thank you Amanda! I just changed the font on my blog and it turned out great, I love it. Thanks so much. I was wondering if you had any idea if I could also change the font on the side bar under the photo captions. Thanks again.
Laura
http://www.bretnlaura.com
LOVELY! I’ve been wanting to do this for a long time! One thing though… I’d love to be able to change my blog TITLE & DESCRIPTION to match the font that I now have for my Post Titles, Date, Sidebar Titles. Is there anyway that I can do this also? That would be fabulous if you know the HTML to change that! Fabulous! Thank you so much, & I love your site! ♥ Amanda
Amanda, PLEASE READ THIS!
I changed the font on my blog and everything worked great, however, I have noticed webs.com isn’t opening. Is there another site I can use? I need help!!!!!
I love your blog! It has been very helpful to me while changing my blog design! I just have one problem- I want to change my post’s font (to the font your using actually-century gothic), and everything worked fine, but I tried to make the font smaller and it wouldn’t change. How can I fix it?
Ignore my previous post- I found a way to change it =D
Great tutorial! Does anyone know how to change the font to a custom font on the entire blog, ie not just post titles and dates but everything, the nav bar, text for the gadgets, comments, subcribe to, ie, everything? Thanks in advance for any help!
Thanks a lot check out my blog to see what I did to it at http://glenysleeng.blogspot.com/
I changed my blogger dates and sidebar titles to a different font, but is there any way to change my post titles to a different font then the one I used for the dates and sidebar?
Thanks for all the great info and instructions!
Ashley
Thank you so much!
wwww.ashopkin.blogspot.com
dear amanda, tq for the tutorial, I really luv your cute fonts. I managed to change the font for my post title and sidebar but unable to change the font for the linkbar, can u help me pls, I can be contacted at shashue@gmail.com. TQ
Hi Amanda, thanks so much for your awesome website! I changed the font for my blog post titles, but when I went back to try and edit my webs.com page so I can have the whole blog in the same font- it won’t let me! There is no pencil next to it… any ideas? Thanks!!
http://www.notyourmotherscupcakes.blogspot.com
I did it!! I did it!!! thanks so much my blog looks so cool. here is a link: http://makingsenseofmynonsense.blogspot.com
Thanks so much!!
Darn it!! :( I used your other tutorial to change my title fonts and whatnot and it TOTALLY WORKED!!
but when I tried to change maybe just a line of text using your method, it doesn’t change. It just makes it’s bigger and in bold.
I did EVERYTHING you said too!!
April 27th, 2009
How To Use a Custom Font for Your Entire Blogger/Blogspot Posts
Okok. So you want to change your *entire* posts to a funky font. Well, it can be done… Sort of.. I can’t figure out an easy way to change the font of your existing posts, but it can be done for any new posts you write.
click here to see a live demo of what this tutorial does
First- the boring stuff. Disclaimers. Warnings. Etc.
1. This tutorial is a continuation of my How To Use a Cute Font for Your Blogger Post Titles, so you’ll have to do all the stuff in that tutorial before this one will work. :)
2. I don’t really recommend writing every single post, all the time, the entire thing, in a custom font.
3. sIFR is best used for changing titles and headers, not entire blocks of text.
4. It will make your page load slower.
5. It will make your page be all jumpy and crazy-looking as it’s loading.
6. It won’t look perfect- you can only use one font color/size for everything you write and there may be some extra spacing/padding at the bottom, but there’s no that I know of to get rid of it (see what I mean about the padding on the demo).
7. I kinda like plain, easy to read fonts for the main content of a blog anyway.
8. If you created an account with Geocities, be sure and read this!
So! If that doesn’t bother you and you’re totally ok with all of that and you still really want to change the font of your entire blog posts… Then this tutorial is for you. :)
First, if you want to use a second font, different from your post titles for your main blog posts… Go to your blogger-sifr.js file and find the lines that look something like this:
Where you said:
“Next, paste this down at the bottom of your blogger-sifr.js file:” – is that what I really do? Paste that code to the BOTTOM of the file I was working (copy and pasting my new font code) or at the bottom of the page?
Either way, it didn’t work and I’m just beside myself to find out exactly what I did wrong since I had such SUCCESS with the other tutorial and that seemed more difficult compared to this….?
HELP AMANDA!! :) please please