April 14th, 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 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.

how to use fonts in blogger
{ 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).

picture1

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. Pick a site address, create a password, and click on Create a Website. When you get to step 2, Select a Template for your Site, be sure and click Use Advanced (HTML) Mode.

how to customize fonts on blogger

On the next screen, choose the No Cost option.

how to use custom fonts on blogger

Once your account is created, click on Edit My Site and 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!!! :)

Didn't work the first time?

*Please read this FAQ of common problems. If the code isn't working for you then 99.99% of the time it's because of a problem listed below. If your question is answered in this FAQ, you may not receive a personal response back to your question/comment. Thanks!!! :)

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

5. 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 (Internet Explorer or Firefox). 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 / 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.

 
I just can’t get it to work and my question has not been answered in this tutorial.

Please note that the code must be actively installed on your blog before I can find the problem that’s causing it not to work. (In other words, the “final step” must be done!) Then:

1. Leave a link to your blog here (if it’s private, send me an invite)

2. Tell me what the problem is. Some days only half my brain is working, so go slow and start at the beginning, please. :)

3. If you do not receive a response, it’s because…

  • Your question has already been answered in the tutorial
  • The code is not installed on your blog
  • You didn’t leave me a link to your blog

*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…

Want to add a second font or change the font for your entire posts?
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!!!


1,111 Comments



  1. 1

    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

  2. 2
    Heather R. says:

    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

  3. 3
    Jasmine R says:

    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

  4. 4
    Glynis says:

    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!

  5. 5
    Lori says:

    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!

  6. 6
    Casie says:

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

  7. 7
    Lisa says:

    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

  8. 8
    Ashlee says:

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

  9. 9
    Shelley says:

    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

  10. 10
    Renee says:

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

  11. 11
    Jamie says:

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

  12. 12
    Joann says:

    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

  13. 13
    Tammy says:

    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/

  14. 14
    Misti says:

    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!

  15. 15
    Amanda says:

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

  16. 16
    Amanda says:

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

  17. 17
    Amanda says:

    @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

  18. 18
    Shelley says:

    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!

  19. 19
    Lori says:

    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

  20. 20
    Amy says:

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

    http://ant42482.blogspot.com/

  21. 21
    Shelley says:

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

  22. 22
    Rachel says:

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

  23. 23
    Shelley says:

    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?

  24. 24
    Amanda says:

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

  25. 25
    Cathy says:

    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!

  26. 26
    Joann says:

    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

  27. 27
    Ashlee says:

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

  28. 28
    Christina says:

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

  29. 29
    Brandi says:

    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!

  30. 30
    Megan says:

    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!

  31. 31
    Janelle says:

    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!

  32. 32
    Debra says:

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

  33. 33
    Kristin says:

    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!

  34. 34
    Kylee says:

    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

  35. 35
    Amanda says:

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

  36. 36

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

  37. 37
    Joann says:

    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

  38. 38
    Joann says:

    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.

  39. 39
    April says:

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

  40. 40
    Amy Johnson says:

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

  41. 41
    Julie says:

    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

  42. 42
    Jenesse says:

    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!

  43. 43
    Tammy says:

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

  44. 44
    Anna says:

    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!

  45. 45
    Pixeltrash says:

    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!

  46. 46
    Aimee says:

    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?

  47. 47
    Joann says:

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

  48. 48

    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

  49. 49
    Amanda says:

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

  50. 50
    Shelley says:

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

    1. Comment Pages:
    2. 1
    3. 2
    4. 3
    5. 4
    6. 5
    7. 6
    8. 7
    9. ...
    10. 23

Leave a Comment





Sites linking to us!

  1. Geocities Is Closing! | kevin & amanda { blog }
  2. How To Use a Custom Font for Your Entire Blogger/Blogspot Posts | kevin & amanda { blog }
  3. Loads of Awards, For me and For You!
  4. Custom fonts in your Blogger post titles | better blogging
  5. Sneaker Teacher: Hooray!