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