April 14, 2009

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 your own, custom fonts on your Blogger/Blogspot blogs. You can change your post title font, sidebar titles 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.

Updated: August 23, 2012

how to use fonts in blogger
{ click image to see this working on Blogger }

Here’s how you do it.

1. Choose a font. It can be any font you want. Feel free to browse the selection of free fonts offered here on Kevin & Amanda!

2. Convert the font to SWF. Make sure the font you chose is saved on your computer and is unzipped, then visit the site below to convert your TTF file into a SWF file.

http://www.sifrgenerator.com/wizard.html

Follow the onscreen instructions to upload your font. When 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 newly converted font (it will be a SWF file).

picture1

3. Download and save the following three files. To save, right click on the filenames below and choose Save Target As or Save Link As.

sifr.css
sifr.js
blogger-sifr.js

Note: If you are using a new Blogger Designer template, and your sidebar titles are not changing, use this file instead of the one above:

blogger-sifr.js

4. Create an account at Dropbox.com. You’ll need an account here, even though you already have a Blogger/Blogspot blog. This is where you’ll host your custom font file, and the other files needed to correctly display it on your blog. Unfortunately, there’s no way to host these on Blogger, so you’ll need this a separate hosting account.

  • Go to Dropbox.com/register and Create An Account. If it asks you to download a file, just click Cancel.
  • Go to Dropbox.com/home to upload your files. Again, it will ask you to Install Dropbox, but just click the X in the top right corner of the popup, you do not have to install Dropbox on your computer in order to upload files.
  • Click on the Public folder, and then click on the small Upload icon.

5. Upload the SWF font file and the sifr.css and sifr.js files you just downloaded. We will upload the blogger-sifr.js file next. Once uploaded, click on the SWF font file, and click on Copy Public Link and Copy to Clipboard.

6. Customize the blogger-sifr.js file. Open the blogger-sifr.js file in Notepad (Windows) or TextEdit (Mac) and you’ll see something like this:

var kevinandamanda = {
src: 'http://username.hostwebs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);

Delete http://username.hostwebs.com/fontname.swf and replace with the link to the SWF font file you copied to your clipboard in step #5.

*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, except with your link.

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 clickable 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. I personally make all three of mine the same 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, save the file and upload to Dropbox.

 

This is the final step! Don't skip it! :)

7. 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://dl.dropbox.com/u/100014927/sifr.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/100014927/sifr.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/100014927/blogger-sifr.js' type='text/javascript'/>

On all three lines, delete my Dropbox links and replace them with your own.

***This is another common typo area. Double check your work here!

Save that.

That's it!!! 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 HostWebs.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 HostWebs.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.

7. If you are using the HostWebs.com links, but it's not working, try changing the links to Webs.com. Everything else will stay the same, just change "HostWebs" to "Webs". There are 4 places where you'll need to change the code. (One in your blogger-sifr.js file, and 3 in your Blogger HTML code.) Not sure what the deal with HostWebs/Webs is, but sometimes if you create an account at Hostwebs, your links will be at Webs. I can't figure it out!

8. If you are getting a weird line of text at the top of your blog that says Read More and has a a link back to this site, go back to the HTML section of your Blogger Dashboard, find the text (just under where you pasted the code) and delete it.

 
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 hostwebs.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 HostWebs.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 HostWebs.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.

 

You may also be interested in…

Want to add a second font or change the font for your entire post?
Check out my second tutorial in this series.



See More Posts About: Blog DesignTutorials

2,392 Comments





1
Brooke - in Oregon April 14, 2009 at 7:32 am

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

Reply

2
Tracy @ Cut/Copy & Paste July 11, 2010 at 4:19 pm

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

3
Chanel December 23, 2010 at 8:44 pm

I adore your webpage/blog! I found it on google. I just started my blog and was looking into ways to fix it up and make it look nice and neat and put together. I tried following the directions but my computer was acting crazy! I’ll try again, like others said… really appreciate you taking the time out to put such detailed instructions. Also, I found the free font page helpful. Not only can I use it for my blog but I also make cards and things and will use it for my designs on those as well! Again keep up the good work and check out my page @ poeticverbage.blogspot.com. Thanks again!

Chanel

4
Heather R. April 14, 2009 at 8:10 am

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

Reply

5
Jasmine R April 14, 2009 at 8:37 am

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

Reply

6
Glynis April 14, 2009 at 8:49 am

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!

Reply

7
Lori April 14, 2009 at 9:14 am

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!

Reply

8
Casie April 14, 2009 at 9:24 am

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

Reply

9
Sarah June 25, 2010 at 2:10 am

I am having this orblem too! an only download the one file type…. did you have any luck finding a way to do it?

10
Mel July 29, 2010 at 8:25 pm

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!

11
Brittany July 31, 2010 at 1:30 pm

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…

12
Michele August 27, 2010 at 1:37 am

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?

13
Alison in the UK February 12, 2011 at 3:14 am

I was slightly confused at this point too, until the lightbulb went on! You only download one file from the font conversion website, the .swf file. The little list of four filenames on the tutorial are all links, you right click on each of them and “save file as” to get them onto your computer.

14
Lisa April 14, 2009 at 9:51 am

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

Reply

15
Ashlee April 14, 2009 at 10:12 am

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

Reply

16
Shelley April 14, 2009 at 10:29 am

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

Reply

17
Renee April 14, 2009 at 10:46 am

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

Reply

18
Jamie April 14, 2009 at 11:56 am

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

Reply

19
Joann April 14, 2009 at 12:10 pm

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

Reply

20
Tammy April 14, 2009 at 12:36 pm

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/

Reply

21
Misti April 14, 2009 at 1:02 pm

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!

Reply

22
Amanda April 14, 2009 at 1:59 pm

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

Reply

23
Amanda April 14, 2009 at 2:07 pm

@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.

Reply

24
Amy June 17, 2010 at 4:49 am

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

25
Amanda April 14, 2009 at 2:15 pm

@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

Reply

26
Shelley April 14, 2009 at 2:25 pm

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!

Reply

27
Lori April 14, 2009 at 2:40 pm

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

Reply

28
Lauren Merrill August 2, 2011 at 2:05 am

I’m having this exact same problem! If you ever figure it out, please let me know!!!

29
Amy April 14, 2009 at 2:51 pm

Yay, I did it! :) Thanks so much for the lesson. You are the coolest Amanda!

http://ant42482.blogspot.com/

Reply

30
Shelley April 14, 2009 at 2:53 pm

Thanks again…the new version of the font worked great! :)

Reply

31
Rachel April 14, 2009 at 3:28 pm

I won!! I never win…..I really wanted this too!! THANK YOU!

Reply

32
Shelley April 14, 2009 at 4:28 pm

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?

Reply

33
Amanda April 14, 2009 at 4:37 pm

@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).

Reply

34
Cathy April 14, 2009 at 4:38 pm

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!

Reply

35
Joann April 14, 2009 at 4:46 pm

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

Reply

36
Ashlee April 14, 2009 at 5:02 pm

Thanks so much!! It worked! My blog keeps getting cuter and cuter, thanks to you! :)

Reply

37
Christina April 14, 2009 at 6:46 pm

Thanks so much for posting this Amanda! I can’t wait to try it out :D

Reply

38
Brandi April 14, 2009 at 8:35 pm

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!

Reply

39
Megan April 14, 2009 at 9:20 pm

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!

Reply

40
Janelle April 14, 2009 at 9:30 pm

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!

Reply

41
Debra April 14, 2009 at 10:32 pm

What an amazing tutorial! Any chance you could share one for those of us on TypePad?

Reply

42
Kristin April 14, 2009 at 10:52 pm

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!

Reply

43
Kylee April 15, 2009 at 12:39 am

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

Reply

44
Amanda April 15, 2009 at 12:47 am

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

Reply

45
Carley July 30, 2010 at 1:45 am

I can’t get this to work!! I have a MacBook… is there something different I need to do? HELP! :)

46
Michelle August 19, 2010 at 10:37 pm

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?

47
Miss CutiePie April 15, 2009 at 3:25 am

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! ♥

Reply

48
Joann April 15, 2009 at 7:57 am

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

Reply

49
Joann April 15, 2009 at 8:11 am

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.

Reply

50
April April 15, 2009 at 8:50 am

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

Reply

51
Amy Johnson April 15, 2009 at 9:34 am

I love this! I am having trouble for some reason I still have your font. I am working on it!

Reply

52
Julie April 15, 2009 at 10:58 am

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

Reply

53
Jenesse April 15, 2009 at 11:06 am

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!

Reply

54
Tammy April 15, 2009 at 11:53 am

Thanks so much! The white boxes are gone and I love the way it looks!
Thanks again!

Reply

55
Anna April 15, 2009 at 12:12 pm

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!

Reply

56
Pixeltrash April 15, 2009 at 1:26 pm

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!

Reply

57
Aimee April 15, 2009 at 1:36 pm

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?

Reply

58
Joann April 15, 2009 at 1:42 pm

me again- Joann
I have the same problem as Anna but only my background doesn’t show-up – its just white here

Reply

59
Lindsay- in Kansas!!! April 15, 2009 at 2:08 pm

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

Reply

60
Amanda April 15, 2009 at 2:43 pm

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

Reply

61
Shelley April 15, 2009 at 6:06 pm

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

Reply

62
Kylee April 15, 2009 at 6:39 pm

Thanks Amanda! That code for my blog title worked. I messed around with the color and love it! Seriously thanks for your help!

Reply

63
Lisa April 15, 2009 at 6:51 pm

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!

Reply

64
Susan April 15, 2009 at 7:31 pm

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?

Reply

65
Makenzie April 15, 2009 at 8:05 pm

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

Reply

66
Rebecca April 15, 2009 at 9:14 pm

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???

Reply

67
Rebecca April 15, 2009 at 9:15 pm

….and also interesting comment design, end of post lines, etc. I am so excited about this!!!!!!!!

Reply

68
Alishaw April 15, 2009 at 9:36 pm

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

Reply

69
Jenny April 15, 2009 at 10:31 pm

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

Reply

70
Ashley April 15, 2009 at 10:55 pm

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!

Reply

71
Shelley April 15, 2009 at 10:57 pm

Will you also send me a new version of the my own topher font?

Reply

72
Jamie April 16, 2009 at 10:57 am

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

Reply

73
Michelle April 16, 2009 at 10:58 am

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

Reply

74
Ashley April 16, 2009 at 12:50 pm

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!

Reply

75
Laura April 16, 2009 at 1:08 pm

Just testing my gravatar.

Reply

76
Kim April 16, 2009 at 4:22 pm

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!

Reply

77
kimberly Knudson April 16, 2009 at 4:28 pm

Yay!! Cool it worked!

Reply

78
Sarah Bratcher April 16, 2009 at 4:57 pm

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?

Reply

79
Jenni K April 16, 2009 at 7:34 pm

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!

Reply

80
Shelley April 16, 2009 at 8:51 pm

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/

Reply

81
katie m April 16, 2009 at 9:54 pm

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

Reply

82
DigiDeb April 16, 2009 at 10:29 pm

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!

Reply

83
Amy April 16, 2009 at 10:30 pm

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!

Reply

84
katie m April 17, 2009 at 12:44 am

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.

Reply

85
jessica April 17, 2009 at 6:35 am

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

Reply

86
Cassidy April 17, 2009 at 1:19 pm

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

Reply

87
Clare Elise Butler April 17, 2009 at 1:42 pm

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!

Reply

88
Aimee April 17, 2009 at 2:11 pm

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.

Reply

89
Amanda April 17, 2009 at 2:25 pm

@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

Reply

90
Eleanor (Oh Louise!) July 30, 2010 at 9:42 am

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

91
Katie October 19, 2010 at 7:43 pm

I have a shared hosted wordpress.org blog. Do you have instructions for it? I’m trying the all in one cupon now. Hopefully that’ll work. Is that what you use? Thanks :)

92
Jami April 17, 2009 at 3:30 pm

Thank you, thank you, thank you! I love learning to do it myself. You rock!

Reply

93
kimberly Knudson April 17, 2009 at 5:20 pm

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]
});

Reply

94
Amanda April 17, 2009 at 5:32 pm

@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? ;)

Reply

95
Ashley C. July 19, 2010 at 10:03 am

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!

96
Ashley C. July 19, 2010 at 9:06 pm

Replying to my own post, below. Turns out it just took some time for the code to “kick in”–it’s working now. :)

97
kimberly Knudson April 17, 2009 at 6:51 pm

oooooohhhhhh. ;)

Reply

98
Christi April 17, 2009 at 7:15 pm

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!

Reply

99
Natalie Holmgren April 17, 2009 at 8:26 pm

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?

Reply

100
Micki April 17, 2009 at 8:47 pm

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

Reply

101
Lindee April 17, 2009 at 10:12 pm

LOVE THIS!!! Thanks for putting it together and sharing it with the world!

Reply

102
Amanda April 17, 2009 at 10:35 pm

@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]
});

Reply

103
Patricia April 18, 2009 at 7:35 am

Thank you, thank you, thank you! Your fonts are awesome and this tutorial was great!

Reply

104
Jami April 18, 2009 at 8:57 am

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!

Reply

105
Nancy April 18, 2009 at 12:10 pm

I just discovered your site and all your amazing fonts, thank you so much! I’m looking forward to using these in my projects.

Reply

106
Jami April 18, 2009 at 12:25 pm

PS. The color change worked just fine–it’s just the fonts I can’t see. Thanks again for your help! :)

Reply

107
Sarah Love April 18, 2009 at 12:50 pm

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? :]

Reply

108
Tanja April 18, 2009 at 5:03 pm

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!

Reply

109
Amy April 18, 2009 at 7:51 pm

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?

Reply

110
Sheri April 18, 2009 at 10:04 pm

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!

Reply

111
Tanja April 18, 2009 at 11:21 pm

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?

Reply

112
Alyson April 19, 2009 at 7:59 am

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

Reply

113
Alyson April 19, 2009 at 8:25 am

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

Reply

114
Alyson April 19, 2009 at 8:37 am

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

Reply

115
Alyson April 19, 2009 at 8:38 am

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

Reply

116
Yanet August 26, 2010 at 11:50 pm

It worked!! How cool! But now I have a question: How do I make it bold?

Comment Pages: 12345...23Next »

Leave a Comment