![All right. I've had it. The boob has gotta go. Any light fixture suggestions for me?? :]](http://photos-h.ak.fbcdn.net/hphotos-ak-ash2/hs016.ash2/34146_848381070441_7033998_46368819_6716386_s.jpg)
How To Use A Cute Font For Your Blogger Post Titles
Are there any fellow font addicts in the house? :) Have you ever wanted to use fonts to add a cute, personalized look to your blog? Have you seen blogs with cute fonts for their titles, dates, or sidebar headers and thought, “I want that!”? Have you’ve already tried to do it, only to discover if someone else doesn’t have the font installed, they won’t see it?
If you answered yes to any of those questions, then I have good news for you my friend! This is a tutorial on how to use cute fonts in your Blogger/Blogspot blogs. You can change your title font, sidebar title font, and even the date font. And even if the other person doesn’t have the font installed, they’ll still be able to see whatever font you chose.
{ click image to see a live demo }
Well, let’s just get right to it! :)
First, pick out a font. It can be any font you want. Of course the cutest fonts can be found right here on kevinandamanda.com. *wink*
Make sure the font is saved on your computer and is unzipped, then go here:
http://www.sifrgenerator.com/wizard.html
Follow the onscreen instructions to upload your font. When you’re going through the steps, you don’t have to change any of the options, just use what they have. When you get to Step 2, confirm that sIFR 3 r436 is checked (if anything else is checked, it won’t work!). Download and save your font (it will be a swf file).
Also download and save the four files below. (Right click and choose Save Target As or Save Link As)
sifr.css
sifr.js
blogger-sifr.js
index.htm
Now you will need to create an account at Webs.com. When you get to step 2, be sure to select HTML Mode.
Once your account is created, use the Single File Uploader.
Upload the swf font file you just generated and the other 4 files you downloaded from here.
Once all the files are uploaded, find the swf file in your Webs.com File Manager and click on it to open it. Copy the URL in the address bar at the top of that screen that pops up. You’ll need it in just a sec. (If you can’t get it to open, just write down the exact name of the swf file)
Go back to the File Manager and click on the pencil (Edit) by the blogger-sifr.js file.
You will need to customize this file for your blog. When you open it, this is what you’ll see:
var kevinandamanda = {
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);
In the second line, where it says
src: 'http://username.webs.com/fontname.swf'
Delete where it says this:
http://username.webs.com/fontname.swf
and replace it with the URL to your swf file- the one you just copied. If you weren’t able to get the swf file to open, just replace username with your Webs.com username and fontname with the exact font name.
*Careful* This is a common typo area- don’t delete the quotes around the font URL or the code won’t work. It should look exactly like it looks in the code above.
Now under that you’ll see three sections: Post Title, Date and Sidebar Titles. In those sections, you will see something like this:
css: ['.sIFR-root { color: #000000; font-size: 28px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #000000; }'
,'a:hover { color: #000000; }
See those three places where it says color: #000000; ? Change that six digit code, 000000, to whatever color you want. (You will need to know the 6 digit color code.)
The first one changes the color if it's not a link.
The second one changes the color if it is a link.
The third one changes the color if it's a link and people hover their mouse over it.
Usually the first two are the same color and the third one is a different color.
Here's a color slider to help you pick your color and get the code. Or I use a cool Firefox plugin, Colorzilla. It lets you click on any color on any webpage (like a background that's already on your blog) and it'll copy the color code to your clipboard. Then all you have to do is paste the code where it goes. I use this addon all the time! :)
You can also play around with the font size if you want it bigger or smaller. Just change 28 to a bigger or smaller number! :) (Try 32 if you want bigger, 20 if you want smaller.)
You can change the font color and size for all three sections. *Note* There are ultimately 9 places where you can change the font color: 3 in the Post Title section, 3 in the Sidebar section and 3 in the Date section. Be sure you change them all! :)
When you get done playing, click the button in the top left-hand corner to save the file.
This is the final step! Don't skip it! :)
Now it's time to implement the code into your Blogger/Blogspot blog. Go to your Dashboard. Click on Layout, then Edit HTML.
Look in that code and find the line that says </head> (Look closely, it's not <head>, it's </head>)
(Quick Tip: Click CTRL-F to search for </head> to easily find it in all that code)
Just above </head>, copy and paste the following code:
<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'/>
You will need to change where it says username on all three lines to the
Webs.com site name that you just created.
This is another common typo area - Only paste this code once and only change where it says username. Don't add or change anything else here.
Save that.
Now go to your blog and see your new, customized look!!! :)
Frequently Asked Questions / Troubleshooting
* Here are the most common problems... and their solutions! :) *
I think I did everything right, but it didn't work.
1. Check to make sure you did the "final step" correctly and that there are no typos.
2. Check your blogger-sifr.js file for typos- this is the most common reason why it doesn't work. Compare your blogger-sifr.js file with mine and see if you can spot your typo.
3. Check to make sure you uploaded all your files to your Webs.com account. You should have at least 4 files: blogger-sifr.js, sifr.css, sifr.js, and your SWF font file. If even one is missing, the whole thing won't work.
4. Make sure you have the most current version of Flash and Javascript installed and up-to-date on your Browser.
5. You may need to refresh or restart your browser (or even reboot the computer) for changes to take effect. Any changes you make through Blogger or Webs.com will be immediate, but because of browser caching, your browser may still show the “old” blog instead of the “new” blog with the font changes.
6. This code is intended to work on the default Blogger Minima template. If the code for your blog has been modified from it's original template, this code may not work for you. You may need to switch back to a default template for this code to work.
My titles totally disappeared! (Blank Titles)
Blank titles are usually the result of a typo in the blogger-sifr.js file. Double check your work and compare your blogger-sifr.js file with mine and see if you can spot your typo.
There could also be a problem with your SWF font file. Type the address of your SWF font file in your browser. It should look like this:
http://kevinandamanda.webs.com/peahannahvanilla.swf
(click on the address to see what it should look like on your screen)
If it is a blank screen, there's an error with the SWF file and that's why your titles are blank too. You will need to delete that SWF file and try again. You may need to try it from a different computer / browser / ISP.
It worked, but I have two sidebars and it only changed the fonts for one.
Add this code to the bottom of your blogger-sifr.js file:
// Code for Second Sidebar
sIFR.replace(kevinandamanda, {
selector: '#sidebar h2',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #000000; font-size: 28px; 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]
});
//End of Sidebar code.
Look in the third line and change the word “sidebar” to whatever you named your second sidebar when you added it. Only the word sidebar, don’t mess with the # or the h2. For instance, it may look like this:
selector: '#left-sidebar h2',
My fonts are being cut off!
This is a problem with the way the font was made, not with the code. If it’s one of my fonts, simply download the newest version of the font from my site. You will need to unzip, reconvert, and reupload the new font file. Be sure to delete all instances of the font from your computer and your webs.com account first. If it’s not one of my fonts, you will have to contact the font author for an updated version of their font.
You can also look in your blogger-sifr.js file, and find the line that says fitExactly (it’ll be in there three times, once in the Post Title section, once in the Sidebar section and once in the Date section) and if it says true, change it to false. *Thanks to Liene for this info!
The custom font is showing up, but the old font is still there too! (Double Titles)
There’s a problem with your sifr.css file.
1. Check to make sure you uploaded the sifr.css file to your Webs.com account.
2. Check to make sure you didn’t make a typo when you copied and pasted the code above the </head> in the Edit HTML section of your Blogger Dashboard.
It worked, but my titles used to be centered and now they’re not.
Whenever I get this comment, I always check, but they always look centered to me. I think it’s because I use Firefox and not Internet Explorer.
You can try adding this code, but I’ve gotten mixed results- some say it works, some say it doesn’t.
Find this in your blogger-sifr.js file:
css: ['.sIFR-root { color: #000000; font-size: 28px; font-weight: normal; }'
Add this:
css: ['.sIFR-root { color: #000000; font-size: 28px; font-weight: normal; text-align: center; }'
It’s working, but the old font is showing up first, then the custom font loads.
The font is competing with all the other photos, blinkies, widgets, music playlists, etc, on your blog for loading time. Limiting the number of posts that show on your blog to 10 or less will help speed things up. Other than that- the font is just like an image and will always have to “load”- that’s just the nature of the internet. (It even does it on my blog.) The original font is there first just in case the custom font never loads, you will still have a post title. How fast the custom font loads will depend on your internet connection speed and the Webs.com connection speed.
It worked! Now how can I change the font for my blog header / description / footer / pages / other blog element?
I don’t recommend using this method to change the font for any other element on your blog besides your post titles and dates. I normally prefer using images. I only like this method for post titles and dates because they are changing with every post- and it would be a pain to make a new image for every post! :) For elements that aren’t changing constantly, like your header, I recommend creating an image and uploading that.
My custom titles suddenly stopped working.
Make sure you have the most current version of Flash and Javascript installed and up-to-date on your Browser.
*Please Note* If you are having an issue with your Webs.com account or the sifrgenerator.com site, you will need to contact them for technical support.
You may also be interested in…
Check out my second tutorial in this series.
If you did this on your blog, I’d love to see it!
Leave a link here, I’d love to leave a comment for you! :)
Thanks for looking and good luck!!!
Filed Under: Tutorials, blog design • 1,746 Comments
1,746 Comments
Leave a Comment
Sites linking to us!
- Geocities Is Closing! | kevin & amanda { blog }
- How To Use a Custom Font for Your Entire Blogger/Blogspot Posts | kevin & amanda { blog }
- Loads of Awards, For me and For You!
- Custom fonts in your Blogger post titles | better blogging
- Sneaker Teacher: Hooray!
- Tuesday’s Tips #4
- How to change titles to use a custom font!!! «
- A “Too Hard” Diet – Can You Do the Raw Diet? | Weight Issues
- The Design Corner « Sweet Tea {Jesus} and Me
This is awesome and I am sure it took a long time to get all the details down in writing! WHEW!! I TOTALLY appreciate all the work you put in on this. I am so glad I found your blog :) Things will slow down after next weekend for me for a bit and I am going to give my blog a FACE LIFT! Thanks again
Thank you SO much for the tutorial! I am excited to try it out. It was so sweet of you to take the time for those of us who aren’t very tech savvy.
Thanks again,
Tracy
thank you, I will have to try this. I cheated on mine because after visiting your blog a couple of weeks ago and lovin it. I took a pic of some fabric I liked and added the title in adobe, then put the “pic” in flikr to get the html code and here we are! http://groovygirlthoughts.blogspot.com/. I used Aqua Poppy Designs 2 per your suggestion for the Groovy flowers on the side. Thank you for your guidance on this cuz I am very new to bloggy world. Your craft room makes me very envious…maybe one day I will take a pic of my sewing room to show you my crazy state that I create in!
http://www.groovygirlthoughts.blogspot.com
Thank you soooo much, I have tried many tutorials out there and none of them worked. Your tutorial was super easy, with excellent directions. Of course I used one of your cute fonts. YAY!!!! :D
You are determined to help me make my blog look fantastic, aren’t you?? :) I’ll be trying this soon!! Thanks for sharing all your knowledge…you rock!
I love your website and I have been wanting to email you and ask how you changed your header font and BAM here is the tutorial! One question:
I did everything right and changed my fonts, but how do I change the background color to match my blog background? Mine isn’t white and I am not a fan of the white box around everything! Thanks!
The direction are excellent. The only part I am having difficulty with is where is says:
Also download and save these three files in the same folder as your new swf file. (Right click and choose Save As or Save Link As)
sifr.css
sifr.js
blogger-sifr.js
The file for the font had to save as an internet swf file and won’t let me save those three with it. So, I am stuck. I went ahead and followed the rest of the steps just using the one font file and the results are on my blog, the titles are hightlighted.
Plese let me know how I can get those three sifr files to save with the font. Thank you so much for teaching us this. I love being able to have more creative control of my blog. You are the best!!!!
I am having this orblem too! an only download the one file type…. did you have any luck finding a way to do it?
I’m sorry if this is the wrong place to post this or if the answer is here – though I promise I searched through and read most of these comments and couldn’t find an answer – but I’m having the same problem as Casie and Sarah. I can only get the swf file – the other three don’t show up… I’ve gone through a couple times and tried to figure this out, but to no avail. I’m so disappointed because this looks awesome and lots of other people seem to have been able to do it!
Thanks so much for your awesome help and tutorials though – I’m excited about all the possibilities for my blog now that I’ve discovered your fabulous instructions!
I had this same problem, an error came up saying it couldn’t find a way to open it or something like that. I kept going anyway, just to see what would happen.
At this step, “Once your account is created, use the Single File Uploader. Upload the swf font file you just generated and the other 4 files you downloaded from here” I was able to find those files under the “DOWNLOADed” folder of my C drive. they all were there! I followed her steps exactly and was able to successfully use my font. Maybe that will help…
I am having the SAME issue! I have checked my downloaded file and done see any other files except the sfw and the index.htm. Where are the other three?
I love your website. It is very inspiring! I have been following your blog for the last week after I read about your fonts in the Creating Keepsakes magazine! Congratulations! What an exciting deal to be recognized for your fonts and your photography on the front cover! :-P I downloaded your free spring kit and created a new header. I am still working on my blog. I do have fun doing it! Take Care! Lisa
Okay, here’s my blog… and my problem! :) The words have a white box behind them, and also the font I used (my own topher–LOVE this one, by the way!) is only showing the bottom half or so. Is this just the font I used and I need to use another one instead?? Did I do something wrong in the code to make those white boxes around it? Thank you SOOOO much for posting these tutorials! I’ve always wanted to be able to make my own blog background and change the fonts, but I never knew how until now. Your directions are easy to follow and simple! Also, all of your fonts are amazing and so are you for letting us use them for free! Thank you so much! :) PS: I never knew about Colorzilla and I love it! :)
Thank you again for another wonderful tutorial! This is like putting together a puzzle. I am ALMOST there…some white is showing up behind my titles. Any suggestions? My blog is private, so I sent you an invite. Here is the address. Thanks!
http://carsonandparkersmommy.blogspot.com
It’s like you read my mind, Amanda!! I’ve been trying to figure out how to do this for the last couple of weeks!! YAY!! I’m so excited to give this a whirl when I get home from work tonight!! :)
I am also having the problem with the white boxes! Help?
Other than that….thanks so much for the instructions! I find more cute stuff on your blog!!!
Wow! How do you figure these things out?
I don’t have blogger and I am wondering how to code this to use on my website – been doing searches but not too much luck.
your awesome!
blessings, Joann
Thanks so much for posting this great tutorial. I’m so glad I found your blog a couple weeks ago. I LOVE fonts and yours are SO great! Thanks so much for making them available. I’m having the “white box” problem also. Any suggestions? Thanks, Tammy
http://just-our-life dot blogspot dot com/
Wow! Thank you so much! I’ve always wondered how to do that, but hadn’t figured it out. Oh, and I also used your freebie kit to make my blog header! A total “scraplift”! LOL I still want to take some time to actually make a blog background, I just haven’t had the chance to yet. Thanks again!
How to Solve the White Background Problem!
Ok, first, it worked!!!! Yay! :) It’s looking awesome on your blogs!!! SO sorry about the white background! Totally my fault!! I forgot a piece of code, but don’t worry, it’s easily fixed! :) And for those of you who haven’t tried it yet, I have already updated the code, so just download the blogger-sifr.js file again and you will be just fine. :)
Okay, here’s how you fix it. You can either download the code again (and change the fonts colors and size again) or you can go in and add some some code to the blogger-sifr.js file in your Geocities File Manager. This is the same file where you changed the colors and font sizes.
Right now, the code looks like this:
sIFR.replace(kevinandamanda, {
selector: 'h3.post-title',
css: ['.sIFR-root { color: #FA4C8C; font-size: 28px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #FA4C8C; }'
,'a:hover { color: #FA4C8C; }'
],
You want to add these three lines:
fitExactly: true,
tuneHeight: -5,
wmode: 'transparent',
So that it looks like this:
sIFR.replace(kevinandamanda, {
selector: 'h3.post-title',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #FA4C8C; font-size: 28px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #FA4C8C; }'
,'a:hover { color: #FA4C8C; }'
],
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]
});
You can leave all the other lines alone. Just copy and paste the the three lines to where they go in the code. Just be careful, and double check your work to make sure all the commas and brackets and quotes and everything are there and in the right place. :) It should look exactly like the code above, of course with the exception that it will have your font size and colors! :)
Do this for all three fonts that you changed.
Like I said, if you’re nervous, just go ahead and download, upload to Geocities, and edit the blogger-sifr.js file again. :)
@Ashlee & those whose fonts are being cut off
If it’s one of my Free Scrapbook Fonts (like in your case) I think it’s my fault (again, lol) because of the way I made the font. The FSF’s were some of the first fonts I ever made and I didn’t know much about doing it back then! :) But don’t worry, they can be easily updated and fixed. I have been meaning to get up off my lazy heiny and do that for a while anyway! :) Ashlee, I’m going to email you a new copy of the font, and see if that works. If anyone else needs an updated copy of a font, just email me and let me know. I have been meaning to do this awhile, this will give me an excuse. ;)
*If it’s a Pea font that’s being cut off, it’s probably because you have an old version of the font. They have all be fixed and the new versions are on my webpage. Just download the new version and re generate it into an SWF file, then upload the new SWF file to Geocities.
Amanda,
My post titles and sidebar titles are still being cut off. I’ve done what you’ve suggested and have reloaded the pea font I was using (I also tried several others) but it is still being cut off. The only other thing I can think to do is to reduce the font size. However, I can’t make it too small or else you cannot read it. It seems the problem is that the font isn’t wrapping around? Any suggestions?
Confused blogger,
Amy
@Joann and those who have their own webpage
It’s pretty much the exact same thing, only you don’t have to have Geocities. You can just upload the swf font file, and the three files you downloaded from here to your webpage. Upload them anywhere you want, just be sure you copy the URL address down for all three.
Follow the steps for editing the blogger-sifr.js file.
You will only need to update the colors and fonts on the one where it says:
selector: ‘h2′,
Now when you get to the part where it says:
It’s time to implement the code into your Blogger/Blogspot blog.
You are going to do the same thing, only you are going to be editing one of the HTML files on your webpage. Whichever one you want. Probably the index.html file. The directions are the same. Find where it says </head> and paste the code just above that.
You will have to change the URL address of the three files to the URL address you copied down when you uploaded them to your webpage.
Now on this same page, look down at the body of your webpage. Whatever text you want in your custom font, just put h2 tags around it like this:
< h2 > The text you want to change < /h2 >*Except leave out the spaces after the < and before the >
Save all your work, make sure all the new files are on your webpage, and refresh the page!
Did it work? LOL
Thanks for the update! I got the white background off. Make sure for those with the same problem that you do it in the part of the code for the title AND the date, or it will only take the white off around the post title. And I used the PeaMystie font and it is cutting me off. :( Thanks again for all your hard work and generosity! I can’t wait to learn something else!
OK- small problem. I don’t want to change the font on my date, but I do for the titles, and sidebar titles. When I delete the part that says, ‘h2.date-header’ it makes the date go to default, but also the sidebars even though I left that selector h2??? Help!
Lori
Yay, I did it! :) Thanks so much for the lesson. You are the coolest Amanda!
http://ant42482.blogspot.com/
Thanks again…the new version of the font worked great! :)
I won!! I never win…..I really wanted this too!! THANK YOU!
One more question. If you want to change another blog you have to another font, will you need to create a separate GeoCities account for each blog?
@Shelley
No, you will not need another Geocities account… You will need to upload a second blogger-sifr.js file though, but be sure to give it a new name… Like blogger2-sifr.js or mypersonalblog-sifr.js. Then just update that file for the new blog (change the colors, size, etc).
Love all these tutorials as of late! I’d love to know how you did your nice and clean nav bar above your header. The only tutes I’ve found aren’t all that fun. Looking forward to trying this out on my blogs!
Thanks so much for the info – but the FTP that I use does not have
a file manager on it, just a site manager so for right now I think
I’ll give up – been at this all day!
will work on this later.
Joann
Thanks so much!! It worked! My blog keeps getting cuter and cuter, thanks to you! :)
Thanks so much for posting this Amanda! I can’t wait to try it out :D
Oh how cool! Thanks for sharing this. A while back I had a font made from my handwriting and I used it. I appreciate the tutorial and the files!
HOly crap you are amazing! I just asked you about this like a week ago, you are on top of it. Anyway thank you so much I am so excited. My blog is looking better! I know this is completely cheesy because you are giving everyone everything for free but I was wondering if I could maybe use those cute little digiscrap sidebar titles? If not that is totally okay. I just love your websites so much they are so cute! Thanks again!
amazing that i actually was able to do this! girl…you ROCK! i of course used one of the fonts…”heather”…it’s pretty close to my handwriting & i must say i love the new look :) thanks for helping a girl out!
What an amazing tutorial! Any chance you could share one for those of us on TypePad?
Wow, that is an amazing tutorial! I just wish I could get it to work. I’m not computer inept, but when I get to the last step (copy and paste the code into my html, change it to my geocities account, and save the template), nothing changes on my blog. So sad :( but I love how cute the sites look with cute fonts on their headers!
I LOVE that you put so much effort into writing this all down. Especially for me, the not so computer savvy girl :) Thanks so much. And I was just curious if there was a way to use one of your fonts on my actual blog title ‘{(.Michael & Kylee.)}{.Life’s A Garden, Dig It!.}’ If so just let me know. Thanks Again!
p.s. I Love Your Fonts!
Kylee
@Kylee
Yes, actually there is! :) This will change the blog title font (not the description). Just paste this code down at the bottom of the blogger-sifr.js file.
sIFR.replace(kevinandamanda, {
selector: 'h1.title',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #8c795b; font-size: 20px; }',
'a { text-decoration: none; color: #8c795b;}',
'a:hover { color: #8c795b;}'
],
Then directly under that, paste this:
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]
});
(Sorry I had to split the code up. Wordpress issues.)
Let me know if it works for you! :)
I can’t get this to work!! I have a MacBook… is there something different I need to do? HELP! :)
I change the font of my headers but it didn’t change my sidebar and I’d also like to change the title.
I see your directions say post at the bottom of the blogger-sifr.js file. I’m just not sure where the bottome of the blogger-sifr.js file is?
Thanks a bunch, I didn’t know you could do that! :)
You’re the best, thanks for a super blog and everything you share with your readers! ♥
I am still messing around with this – I did all that I was suppose to do and when I go to web to check the page it comes up blank – I don’t get an error message- but when I got to page – view source I can see my html coding.
now when I delete the coding from my html file then I can view the page but then there are no changes in the font either.
well that’s it for now
just another comment- I can only edit the blogger-sifr file while its still on my computer I right click on the file edit-open and it opens in notepad. there are some little white squares with black borders in the code – this taht normal
any way so I edit it and then upload it to my web site
not sure if this is correct thing to do or not.
not sure what program to use to edit this file so it opened in notepad so that’s what I used.
HELP! I did it…followed the steps…however I cannot see my titles (on posts or on sidebar) at all. It’s just blank. Also, I didn’t change anything with the date, but the dates not there either. When I click on that area…a box is kind of highlighted.
Any help is appreciated!!
I love this! I am having trouble for some reason I still have your font. I am working on it!
Hey, thank you so much for this! I love it and really want to change my font on my blog. I went through all the steps and double checked them, it is not working for me. I am not sure if you have any suggestions. Thanks again!
Julie
I’m SO excited that you have this tutorial here. It adds something extra to my blog. BTW, now I have to spend some time in GIMP to make my own scrapbooked background for it!
THANKS!
Oh – and I tried to change the blog title/description with the script you said to add to the bottom, but wherever I add it into the blogger-sifr.js, nothing works, even the fonts that were previously working. Any ideas? (I’m using GeoCities)
Thanks again!
Thanks so much! The white boxes are gone and I love the way it looks!
Thanks again!
Thank you for the tutorial! I’ve always wanted to use custom fonts but I always get discouraged when I know others will just see the plain old ones. I’m trying to get this set up on my website here. But when I put in the code above the header the content dissappears? Can you let my know what I’m doing wrong? Thank You!
I got this to work with pharmacy as the font, but I wanted to use peacammipea.tff. I read the comments and realized that it was cutting it off because I had an old version of the font, so I re-downloaded it and it is still cutting it off. I even deleted the old .swf file in my file manager, but it still is cutting it off. I made the font smaller. I made the font area larger (in blogger). Can’t think of anything else to do to fix it. I will go download a new font from your site and see if it will work.
Thanks for all of this work you put into this tutorial. It really is a great one!
Thank you, thank you for this wonderful tutorial. I am super discouraged because I followed the instructions but it will not work on my blog. It worked once and I decided to change the color code but now it doesn’t work and I don’t know what I did. Can you email me and let me know what I am doing wrong?
me again- Joann
I have the same problem as Anna but only my background doesn’t show-up – its just white here
I LOVE YOU AMANDA! lol This is amazing and I managed to do it myself! *gasp*
Check it out!
http://passengerseatkindofgirl.blogspot.com/
The next thing I’d like to know though is how do I change the font in the body of my posts?!
Thanks again!
Lindsay
Ok, I emailed Joann, April, Amy, Julie, Jenesse and Anna.
@Pixeltrash
Yes, once you download the new version from my site, it should show up correctly.
@Aimee
I need a link to your blog so I can see what’s goin on. :)
Did I miss anyone? :)
I followed your instructions to change the font for another blog I have by uploading a second blogger-sifr.js file and renaming it. I also did a second swf file for the other font I wanted. I went through and changed the HTML to be the right font and all, but when I put the extra bit of code into my blog HTML, it is just putting the info in for my first blog’s font and colors. How should I change the code so that it knows which blogger-sifr.js file to pull from? Hope that makes sense. :)
Thanks Amanda! That code for my blog title worked. I messed around with the color and love it! Seriously thanks for your help!
I get the same problem as Kristen (Post #33). It doesn’t change anything. I am consider myself a pretty computer saavy person but this isn’t working! ARGH!
Is there a way to change the text of the sidebar, such as any links lists or text for your widgets in addition to the sidebar headers?
oh my god it took me like ALL day to decide on the font… i seriously switched it like 10 times… it was fun! :)
thank you!!!!
LOVE, LOVE, LOVE this tutorial!!!!!!!!!!!!!!!!!! Thank you so much for teaching us how to do this. Now, can you show us how to make and upload new sidebar titles??? Pretty please???
….and also interesting comment design, end of post lines, etc. I am so excited about this!!!!!!!!
You gave instructions for blogger, but then you made a little comment about your wordpress blog…do you also have instructions for us using custom CSS upgrade and wordpress?? Pretty Please! LOL
Thank you SO MUCH for this tutorial! It was super easy and really changes the look of my blog. You rock!
quick question… There seems to be a few extra spaces between my title and post now. Is there any way to fix this? I’m fine with it as is, but wouldn’t mind deleting the extra spaces if possible. Thanks so much!!
http://www.throughjennyslens.blogspot.com
Well… it took me a few attempts to get it right… but I finally did! Love it! I had to download a new background (I deleted my old out of mistaken frustration… but found a cuter one anyways!) and because I’m not cool enough to figure out how to make my own! But thank you Amanda for giving us all the info! I know all my girlfriends will be dying to know how I did it, and I’ll be glad to refer them to your site! Thanks!
Will you also send me a new version of the my own topher font?
It worked the 1st time I did it, but I wanted to change the font size to be alittle bit smaller and ever since then, I can’t get it to change for me. It has now gone back to regular font! Boring…please help me! :)
Jamie
Thank you so much for putting this in your blog! I’ve *hated* the standard blogger font since I started blogging and I always seemed to get flustered digging through all the script to figure this out. You’re so smart! Thanks again! :)
you are awesome! your fonts are super cute and this tutorial was very user friendly. i only have one question. if you go to my blog, you’ll see that the date and title of all my blogs appear twice – once in the regular blog font and once in your cute font. i think this might have something to do with the part where i had to copy your code in when i was editing the html on my blog but i didnt see a part there that said like you said it would. any way you can help fix this? i appreciate it! :-D keep up the great work!
Just testing my gravatar.
Thank you so much! I, like you, love love love fonts. I am constantly working on word art and updating my blog header so that I can show off new fonts. Thanks for showing me how to add them to the rest of my blog!
Yay!! Cool it worked!
I’m having the same problem as laura. I have 2 titles showing up on my blog posts one in plain font and one in the fancy one i inserted with your code. Can you help me fix it? I also was wanting to know if you have a way of changing the font for the actual post?
Amanda: YOU ROCK! seriously. I remember asking you about possible doing tutorials of this sort and you are! They are so clear and easy to follow. Thanks for answering questions too!
Here’s another blog I made-over for a friend using my newly acquired skills! And this one went off without a hitch!! YAY! :)
http://ourteachersrock.blogspot.com/
Thanks so much.
I must have screwed something up b/c it didnt work. So I will have to try again. :) :) :)
http://www.doubletakephotography.blogspot.com
These are really great tutorials for blog magic you’ve made. Thanks for sharing your expertise and giving the rest of us encouragement to try it ourselves!
Thank you! I did this on my blog and I love it! I enjoy playing around with my blog design! I just found your site about a week ago and I love it! Thanks for all your hard work!
Ok. Got it!
Once I used ctrl F to find all these codes, it made it easier! Thanks. Ok, now for FAVICON instructions. I’ve been trying, but no luck!
Thanks again.
Hey, its jessica again! I was changing the fonts over for a friend (the blog site posted) and she actually has two columns on her blog…only the right sidebar is showing up the font. Is there anyway to get the left side too? Thanks!!
Hi! This is the friend that Jessica helped. Thank you so much for doing a tutorial and setting this up. It is absolutly adorable.I love it and i love your blog. Thanks so much!!!
Amanda! First let me say you are FABULOUS & then some. I truly am a font snob because of creative people like you! Was wondering if you could provide a little assistance. I followed all of the steps you provided & it worked. But then I went to change something {I don’t even remember what now} I managed to reset everything. So I followed the steps all over again {4 times!} and that didn’t work. Then I completely started from scratch & reinstalled the blog template, changed the font files, etc. & tried your wonderful steps but but still no luck. Any ideas? Trying not to go crazy! Thank you so much for the help!
Thanks for the tutorial, I am excited to try it out. I do have one question though. Is there a way to change the font of the ENTIRE post and not just the post title? Thanks for helping us all “beautify” our blogs.
@Alishaw
If there’s a way to edit the HTML of a Wordpress.com blog, then it can be done, but I believe, even if you upgrade, you can only edit the CSS. We need to be able to edit the HTML in order for it to work. I have a self-hosted wordpress.org blog, which is why I’m able to do it. Confusing, huh? :) Let me know if you find out anything! :)
@Jenny
The sIFR documentation says to change the tuneHeight value, but I’ve made it like 5876 and it never does anything! LOL
I think I figured out how to fix the spacing between the post & date!
I only wanted to have my dates in the cute font & there was a ton of space between the post & date so I researched and found that if you add this in your CSS, it should fix it. In blogger click on Template Designer, Advanced, Add CSS and then copy this and paste:
.post h3.post-title {margin: -8px 0 0px;}
It should work..or it did for me!
You can change it to be more or less depending on how much space you want… but -8px worked for me.
Hope this helps!
Thanks Amanda for your cute fonts! I added your button to my sidebar!
-Eleanor :)
Thank you, thank you, thank you! I love learning to do it myself. You rock!
Double cool! (and maybe an answer for Jessica)
I have a 3 column layout – so 2 sidebars – you need to tell it sidebar1 and sidebar2 for it to work. This is what I did, and it worked!! YAY!!
Change the line that looks like this
selector: '#sidebar h2',to say this instead
selector: '#sidebar1 h2',and then just add another section of code –
sIFR.replace(kevinandamanda, {
selector: '#sidebar2 h2',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #702700; font-size: 34px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #702700; }'
,'a:hover { color: #FA4C8C; }'
],
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]
});
@kimberly Knudson
The fonts on your blog look awesome! You did great figuring out the sidebar thing. :)
One thing to note, while that was the case for your particular blog, I’ve noticed from helping everyone else that everyone has a different name for their third column. Some are named left-sidebar some are new-sidebar some are left-sidebar-wrapper, you get the idea. :) Most people’s right sidebar are just named sidebar (even if they have 3 columns) but like you discovered in your case, it’s named sidebar1.
So if you remember what you named your third column, yes, you can just add that extra code down at the bottom, find the selector line and delete where it says sidebar and change it to what you named your sidebar.
But unfortunately, they’re not all named the same thing. Blogger doesn’t want to make it too easy or anything, right? ;)
Everywhere in my code, it says ‘left-sidebar’ or ‘left-sidebar-wrapper’. I have tried both in the .js file, but my left sidebar still hasn’t changed. I’ve tried all sorts of other combinations, with no luck. Any ideas? It’s working fine on the right and for titles and dates. Thanks for your help!
Replying to my own post, below. Turns out it just took some time for the code to “kick in”–it’s working now. :)
oooooohhhhhh. ;)
I love your handwriting fonts and have been using them since someone showed me your site several months ago. Everything I print on my computer is in a font from your website. Just today I found this tutorial and updated my blog with one of your new fonts. I keep telling myself I’ll sit down and write out my own font to send in.
I do have a question. I think I read all the comments and your replies to see if this was already mentioned. And I don’t know if this is something you do, but if it is and you don’t mind sharing… I would love to use one of your fonts as my signature on my blog, but I have no idea how to make a signature. Is that an easy thing to do? If this isn’t something you specialize in, that’s ok. Thank you for creating this site with so much fun stuff for others to use!
Thank you so much. I love my new fonts. I want to my blog discription font now. Can you tell me how to do that too?
Thanks so much for sharing the instructions! I just finished putting them on my blog and I’m really excited! I used PeaAnderson on mine and I love it! Thank you, thank you!
Micki
LOVE THIS!!! Thanks for putting it together and sharing it with the world!
@Natalie Holmgren
You can try pasting this down at the bottom of your blogger-sifr.js file
sIFR.replace(kevinandamanda, {
selector: '.description',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #FA4C8C; font-size: 28px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #FA4C8C; }'
,'a:hover { color: #FA4C8C; }'
],
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]
});
Thank you, thank you, thank you! Your fonts are awesome and this tutorial was great!
Hi Amanda. I am using an ftp. Is there a different procedure for that? I can’t get it to work. I am working out the password issue, but even when I enter the passwords, it isn’t showing the fonts. (I went through it line by line to see if I missed anything, but I cannot find an error.) Thanks!
I just discovered your site and all your amazing fonts, thank you so much! I’m looking forward to using these in my projects.
PS. The color change worked just fine–it’s just the fonts I can’t see. Thanks again for your help! :)
hey! i just wanted to let you know that i admire the stuff you do! and thank you so much for being willing to post all these tutorials and everything. this is so great and i’m using a bunch of stuff that you teach on here! i used the spring mini-kit for my blog layout and i’d love for you to see what i’ve done. and i also used the Pea Sarah Quick font for my page.
I was also wondering if I would be able to use that font as kind of a logo for pictures I take. The pictures aren’t for anyone else or for sale though, they’re just like my personal stuff. Would that be okay? :]
I am a scrapaholic and I !la-la-love your fonts and I have been downloading from you guys forever, and I am absolutely thrilled to hear about this! I will send everyone that asks, promise!
Thanks for this–I can’t get the sidebars to work but I am having so much fun playing I think I am having a size issue with the font I picked because its getting cut off–any tips?
Thanks so much for these instructions! I just wish I could get it to work :) I think my problem is that I don’t have a sidebar h2 within my code. I read about where someone just changed the code to match what theirs was called, but my problem is I have no idea what my sidebar headers are called within the code. I have tried several ones and nothing seems to work. Not sure if you can figure it out by looking at my blog, but if you can, I would really appreciate the help :) Thanks!
Hi Amanda, Okay I got all of the changes done and it was easy however, I have all my color codes set the same. Apparently, on the actual blog instead of brown, the post title color is royal blue. Not sure why? Any idea?
Hi Amanda,
These tutorials are great! I’m having trouble with this one though and I think I’m doing something wrong in geocities. I’m not sure. I followed the directions and tried it out on my test blog but it didn’t change anything. In geocities, the link you instruct us to delete and replace says something different than what you said it would say. It isn’t an url that says anything about kevinandamanda. Could you take a look at my geocities acct and see if i’m on the right track?
Thanks!
Alyson
Hey Amanda,
Okay, I was able to get the font to work! Yay! But now I’m having trouble with the top of my Blog titles and date being cut off. Can you take a look at my blog and let me know what you think I could do to fix the problem? Do I need to pick a smaller font?
http://www.chasethepuggle.blogspot.com
Thanks!
Alyson
Hi Amanda,
Ok, I got the font to work on my blog! Yay! But the top of the post titles, date and sidebar fonts are getting cutting off on top. Do you have any suggestions?
http://chasethepuggle.blogspot.com
Thanks, :-)
Alyson
Hi Amanda,
Ok I got the font to work! Yay! But the tops of the fonts are getting cut off on my blog. Could you check it out for me and let me know if you have suggestions?
Thanks :-)
Alyson
It worked!! How cool! But now I have a question: How do I make it bold?