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:

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! :)

Filed Under: Tutorials, blog design • 84 Comments

Geocities Is Closing!

Important Update for those who changed their blog fonts and used Geocities! I just found (a little over a week after I wrote my tutorial, what timing, huh? :p) that Geocities is closing and will be terminating all of their accounts later this year. This means that if you still have any of your font-changing files hosted at Geocities, they will be deleted and the custom fonts on your blog will stop working. But don’t worry! I’ve found a new place (Webs.com) where you can upload your files. (Now don’t go closing on me next week, Webs!)

Basically, here’s what you’ll need to do:

1. Create a Webs.com account (Use Advanced HTML Mode)

2. Save the sifr.css, sifr.js, blogger-sifr.js and any SWF files that are currently in your Geocities account and upload them to your Webs.com account

3. Upload a new file, index.htm to your Webs.com account (right click and chose Save As to download the file)

4. Go to the Edit HTML section of your Blogger Dashboard and find the previous Geocities code you pasted. Delete all that and replace it with this:

<link href='http://username.webs.com/sifr.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://username.webs.com/sifr.js' type='text/javascript'/>
<script src='http://username.webs.com/blogger-sifr.js' type='text/javascript'/>

Where username is your Webs.com site name.

After that your fonts should be functioning just as before. If for some reason it stops working, check and make sure all the files uploaded correctly to your new Webs.com account, and then make sure when you deleted the previous code / pasted the new code in your Blogger Dashboard that there were no typos, you didn’t miss anything, etc. If it worked on Geocities, it will work on Webs.com! :)

*I mentioned that you will have to upload a new file, index.htm. Webs.com will delete all accounts that don’t change their index.htm file within 15 days of opening an account, so to be safe, just upload the one I have provided for you. :) You can also view that file to get some extra tips and tricks for editing your blogger-sifr.js file.

If you need more in-depth instructions, I have updated the tutorial with pictures to reflect the Webs.com changes.

Ok, enough about that. :D

Thank you *sooooo* much to everyone who added a kevinandamanda button to your blog! :) I am so grateful for all your support! I went and looked at every single one of your blogs this week and all of your blogs are totally awesome looking and I am honored that you would put my button up there! :D

Now we have a winner of the $25 gift certificate to SuzyQ Scraps’s store at Enchanted Studio Scraps!!

Congratulations to #31 Annette Bowers! :)

The 3rd link did it! :) Annette, the Birthday Calendar on your blog is SO cute!!! :)

And with that- I’m going to take a long, hot bath. ahhhh. This morning Kevin and I decided to take the puppies on a spontaneous hike up to Laurel Falls in Dayton, TN.

We had a blast (especially Miley & Howie) and it was really beautiful up there. It was a relatively short hike (2.5 miles to the falls), but the last mile or so was straight. up. I mean, really. I felt the burn. :p I haven’t moved since we got in. Hopefully I’ll make it to the tub.

Filed Under: Tutorials, blog design • 10 Comments

Blog Buttons!

Hey! So if you’re a fan of kevinandamanda.com, or you’ve found any of the recent blog makeover tutorials helpful, or you really like the free fonts and recipes or whatever else it is I post about around here… :D And if you wanna spread the word or you’re wondering how you can show me the love in return… ;)

I have some blog buttons for you! :) Just use the Grab Me code below to show these off on your blog. :D

<center><a href="http://www.kevinandamanda.com"><img src="http://kevinandamanda.com/buttons/kevinandamanda.jpg" border="0" alt="Fan of kevinandamanda.com! Free Fonts. Recipes. Scrapbooking. Photography. Blog Design. Tutorials. Giveaway. Everything you're into!" /></a></center>

<center><a href="http://www.kevinandamanda.com/recipes/"><img src="http://kevinandamanda.com/buttons/recipes.jpg" border="0" alt="What's for Dinner? Try these delicious recipes you'll want to add to your dinner rotation. kevinandamanda.com/recipes" /></a></center>

<center><a href="http://www.kevinandamanda.com/fonts/fontsforpeas/"><IMG SRC="http://kevinandamanda.com/buttons/freehandwritingfonts.jpg" border="0" alt="I get the cutest handwriting fonts at Fonts for Peas! kevinandamanda.com/fonts"></a></center>

<center><a href="http://www.kevinandamanda.com/fonts"><IMG SRC="http://kevinandamanda.com/buttons/fsf.jpg" border="0" alt="I get the cutest fonts from Free Scrapbook Fonts! kevinandamanda.com/fonts"></a></center>

Need more specifics?

Well, if you have a Blogger/Blogspot blog, just go to your Dashboard, then Layout, then Page Elements and click on Add a Gadget.

Click on HTML/JavaScript.

The Configure HTML/JavaScript screen will pop up. In the title, you can name it anything you want (like “I love these sites!” or “My Favorite Blogs”) or you can just leave it blank if you want. :) In the Content box, copy and paste the code from the blue boxes under the buttons above.

If you’d like to display more than one button, just put this between each code:

<br>

<br> means Break, or Line Break and it’ll add a line between each button. If you want more space, just add more breaks! :) (I added 2)

When you’re done, don’t forget to Save! :)

Thanks so much for all your support! :)

Filed Under: Tutorials, blog design • 175 Comments