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
{ 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).
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:
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.
More from Amanda:
Share:
Filed Under: Blog Design • Tutorials
Follow Amanda on 
2,364 Comments
Hi everyone,
It seems that I’m a bit late on this one…:)
Well I tried to follow everything, but coming to the part where I had to sign up to Webs I simply can’t make it. They basically make me create a website and I see no sign of the directions you gave here.
Can you please help? Maybe they have changed and now they don’t have the usual features…I don’t know.
Thanks everyone!!
Hi Amanda and Kevin! Love your site. Your photography is amazing. Thank you for all the freebie fonts and the how-tos. I can’t wait to put them to use. I also am a teacher and am just starting to create documents to sell on Teachers Pay Teachers. Do you allow your fonts to be used in documents sold on Teachers Pay Teachers? I look forward to your answer.
Many thanks,
Brittany
webhost no longer has the html only mode…im lost as far as where i should go from here…
This article is truly a gem. I’ve referenced it several times in the past year and keep sending other people to it. Thanks for putting it out there for all of us to learn from!
Hostweb.com is now webs.com and it no longer has the “HTML only mode.” Is there another way I can still do this? I would greatly appreciate your help! You’ve done such an amazing job with this post, but webs.com has gone and screwed everything up by changing their website. Please do your magic and help a sister out!!!! :)
Hey, I have the same problem as many of the recent peeps. Hostweb doesn’t work anymore ): So please let us know asap if there is any other way we change our blogger fonts!!
This is really neat, but I would still like to know how to do it for the header?
I don’t know how to make an image
What a great article. As a printer in Las Vegas, I welcome anything that helps people to design their own marketing materials, as either a business card all the way up to an interactive website.
Hi! I’d like to second Nicole’s sentiments:
“Hostweb.com is now webs.com and it no longer has the “HTML only mode.” Is there another way I can still do this? I would greatly appreciate your help! You’ve done such an amazing job with this post, but webs.com has gone and screwed everything up by changing their website.”
What’s our alternative? Please help!
webstarts.com! ;)
Hi Amanda,
I found this wonderful post a few days ago. Unfortunately, html mode is not available on HostWebs anymore. Are there any other sites that would do the same thing. I tried to google for the information but am having no luck. Please help!!!
Thanks!
Bina
webstarts.com! Try that! ;)
It worked! But the old font that I used is still showing up on my sidebar! I only changed the font on my post titles! Anyway,I may just have to reboot my computer for the changes to take effect! Thank you for this great tutorial! I use it ALOT! :D
Hi Amanda! I’ve used this once before and it worked perfectly. Now, I’ve gone back to do it again and HostWebs no longer does HTML only! Help! Any other host suggestions?
WebStarts.com has an html only mode, although I almost missed it and deleted my account. I still can’t get it to work though. My titles keep disappearing completely. Maybe you can figure it out?
Startwebs.com charges a monthly fee to be able to edit your html. Any other suggestions? I’d love to do this!
I’m trying to do this using WebStarts.com html only mode. I think I’m doing everything correctly, but my post titles disappear completely! I checked my swf font file and it’s all good. I went back and checked (and double- and triple-checked) my blogger-sifr.js file and that all looks good, too (I even tried it with both versions of the blogger-sifr.js file from the original post above). I don’t get it… so I deleted the html from my template and I’m leaving it the “old way” using Blogger default fonts until someone can help me figure out what’s up.
Has anyone successfully done this with WebStarts.com yet?
THANKS!!!! <3
Thanks so much for the great tutorial…and thank you Amber for the suggestion to use webstarts since hostweb isn’t doing html only anymore.
I have NEVER EVER done any web design in my life nor have I worked with html but this tutorial walked me through it step by step. So, so, so helpful!!
With webstarts, you follow the directions from this tutorial, except make sure you change their code and replace hostwebs with webstarts. It worked perfectly!
Okay, so I am new to the blogging world but this is the first tutorial of how to use my own fonts in my blog that I have found! So thank you for that!
The only problem is when I went to set up my hostwebs account I found that they no longer offer HTML only sites! What do I do?!
Me too! It’s a super sketchy website!
I totally love all of the fonts you are so generous to share. I was just wondering if these directions will work to change fonts for Wordpress too?
HEELP!! I did everything , step by step and it worked !! Just for the first 5 minutes then it stopped working >< Why did this happen ? I started over and did it step by step again! And it just wouldn't change!!
Please reply as fast as you can!
Thank you so much for your information and for your free fonts! They helped me “save” my blog (read as: ‘made it cute’). Thank you for all your work!!
I am new at this blog thing…I just created mine yesterday. I found your page and followed the instructions and it worked! The font was soo cute! But i just posted a new blog entry and now it is back to the original font :/
Hi!
*Pfeeew* it took me some time and concentration but I managed to do it :)! Basically I only wanted to change the post title text to match it with the handwritten text from my header. Thanks SO much for all the work you put into it! definitely crediting on my blog!
Is there any way to upload your font to Blogger without changing code? I’m not tech savvy at all.
Hi Amanda,
I’ve used this tutorial before, successfully, but it was a different blog and before you changed over to Dropbox for a host. My question is this, I get thru everything on the SIFRgenerator site, but when I get a file to download, it is only SWF, which won’t open on my computer, and then I’m unable to get the 3 files you indicate in step 3. What am I missing?
I was in the process of trying this great tutorial until my husband told me to stop. He said that because it requires flash, “means no people using iphones, iPads, or don’t have it installed will see it.” So I’m going to try another method. I just wanted to put that out there. I do greatly appreciate the time and effort you put into this step-by-step tutorial. Many thanks!
I love this! I’m bummed because dropbox stopped providing their Public folders. I accidentally deleted mine a while ago on my dropbox and making a new one had no public folder. :\ I’m trying it with Google Drive. I hope this works!
I got it to work for my title and sidebar, but not the font in the main post. Does anyone know why? I’ve double checked everything and can’t seem to find an error.
Hi Amanda. I went through all the time to change the fonts on my blog to something cute from your fonts, but I don’t like it. :( First, the original blog fonts show up, then all the sudden it changes, and there’s a little gray box at the top of my titles? I’m sure it’s something I did, but I have tried and tried to fix it and it just isn’t happening. I was wondering if you have a tutorial on how to revert back to the original blog fonts? I just found a place where the blogger site gives the option to change the fonts without going through all the trouble I already went through! Can you help? Thanks!
Hi Chris,
I’m currently setting up my blog, followed this tutorial, and it worked, but I got the little grey box at the top of my title too!
Did you figure out a way to fix it, or did you just scratch the whole idea?
Thanks for your help, or Amanda’s!
Lesley
I am having a couple problems. I was unable to open the font file that I converted and then when I uploaded it to Dropbox it doesn’t give me a public link button to copy onto clip board. Help please.
I’m having this same problem. It says that the file isn’t working on dropbox. Any help?
Thanks for this! I’ve been looking for a breakdown on how to use all of my favorite fonts. I appreciate it!
I’m really upset. I tried this and it completely messed up my blog and I don’t know how to fix it. Dropbox has changed and these guidelines don’t fit anymore. If you could please tell me how to fix the top of my blog that would be great thanks
I was able to google how to fix my blog, but the guidelines still don’t fit dropbox anymore
hello,
this is a great post, i wnt to apply unique font for post title on my blog
and now i get it all, how to do it
thanks for sharing
My date and post titles have changed perfectly but for some reason my sidebar is not changing. I only have the one sidebar on the right. All I changed in the blogger code was the font link and colors.
Thanks so much for your tutorials and help!
Hey Amanda! I’m super excited to get some new fonts but I’m having trouble with the dropbox part. I’ve created an account but I cannot find the “Public” folder anywhere to upload my files into. My account just shows the regular drop box folder. Also, I don’t know if it’s because I’m not in the “Public” folder, but I cannot find out where the “Copy to Public Link” and “Copy to Clipboard” links are. In my normal dropbox folder my only option is to copy it to the dropbox folder again or to the photos folder. And while I’ve got your attention, I have one more question :) Once I copy my SWF Font File to the clipboard, will it generate a link to replace the hostweb.com link? I’m just wondering because whenever I open my font file, it’s just examples of the letters and not a link. Thanks so much!!
Hi!
Trying to figure this out! I am having the same problem with “right-clicking” on those 3 files. Where are they located? After Step 3, I am asked a question about Upper/Lower case, full set, etc. Then in my Downloads I have the swf only.
Can anyone please help?
I’m on dropbox now but there’s not a “Public” folder– I don’t know if that makes a difference but I don’t want to move forward with all the steps if I’m doing something wrong! Do I need to buy the PRO version of Dropbox?
It doesn’t work for me :( I did it several times and when I go to write a post it is just the same old boring font. I am doing something wrong? Can you help me?
Hi, it worked for a sec, and then the headings changed to: “Please update the flash movie to 436″. I have the latest version of Flash Player, so I have no idea why it doesn’t show my normal headings… Any ideas? :)
I did this a long time ago…before you updated it. I’d like to refresh the look of my blog which currently has pea hart as the title and date. But I cannot remember where I would have stored the font so now pea hart keeps overwriting any changes I made after a second or two. I came back to see the original directions to undue them, but they are not here. Where might you have told us to store the fonts before dropbox? Or, how can I de-activate pea hart from overwriting anything new.
Thanks for your help and fonts. I know this is above and beyond…but I’ve just spent all afternoon on this and now I am out of time!
I have created an alphabet, making each letter and extras characters as jpgs. Is it possible to send those rather than write them out and scan them for you to create them into a font? And, can this be done without sharing them as a free front for everyone to download?
Thanks,
Marcia
This is such an awesome tutorial. Thank you so much. Is there anyway to adjust the tracking on the title text (i.e. put more space between the letters)?
First off, thank you so much for the grat tutorial, I’m really glad I found this!
But it did not work for me and I don’t know why. I did everything exactelly how you explained it and then I checked the points for when it did not work but I did everything like you explained it.
Maybe it’s the font I would like to use, it’s called “Learning Curve”.
Mhh, maybe someone can help me a little? :)
Thanks, Laureen ♥
Thank you SOOO much!! This was exactly what I was looking for and it worked perfectly. Really easy to follow and well written. Thanks!!!
Perfect piece of function you might have done, this internet site is genuinely cool with wonderful information .
Is there any way to change the navigation menu font on the new Blogger templates using this? Maybe add another piece of code to the sifr.js file?
Hello there.. My blog is working but ~ My post title have gone .. I mean it was there but it became the name of that font ~ Example my post : “Happy” but it changes to “Pea Britney (Normal) – This sIFR v3-r436 file was generated by sIFRGenerator.com” like that. I hope you can help ASAP~ Thnks btw~ :)
I do not write many responses, but i did a few searching and wound up here How To
Use A Cute Font For Your Blogger Post Titles | Kevin & Amanda.
And I actually do have a few questions for you if it’s allright. Could it be just me or does it look as if like some of the comments appear like left by brain dead people? :-P And, if you are posting on additional online social sites, I’d like to keep up with everything new you have to post.
Could you make a list of the complete urls of all your community pages like your twitter feed, Facebook page or linkedin profile?
hiya!,I similar to your writing hence a lot! percentage we keep up a correspondence further in relation to your send proceeding AOL? I penury an informed on this house to resolve my problem. Perhaps that is you! Having a look forward to see you.
The subsequent time I learn a weblog, I hope that it doesnt disappoint me as a lot as this one. I imply, I do know it was my choice to learn, but I truly thought youd have something attention-grabbing to say. All I hear is a bunch of whining about one thing that you could possibly fix should you werent too busy searching for attention.
This has really been a great resource for those who want to use fonts other than Google Web Fonts on their Blogger blogs. I have a question, and I don’t know if you will be able to answer it for me or not, but figured it was worth a shot.
I created a test site and successfully got the custom fonts to work, however when I try to implement it on a different test site where I have used a program called Artisteer to generate my layout, it doesn’t appear to work. Something from the program I used must be over writing the code you instructed to use. Any thoughts?
When I open the blogger-sifr.js file it doesn’t open in text edit, instead just as a code online so I can’t change it. Any suggestions?!
Ok I figured it out…now on to the next problem – The “final step” Where am I supposed to Edit the HTML? The only HTML I have in there already is for the background.
I’d like to open an account Preteen Panty Models maria is good
When the font is too big, one can use http://www.cms-guide.com/online-font-creator/
Thank you so much for this amazing tutorial! I love how it changed the look of my blog. Would it be possible to add into the code html to change the font of my pages tabs? I would love for them to match my post titles!
Thanks again! Very easy to follow tutorial!
A motivating discussion is definitely worth comment. I think that
you should publish more about this topic, it
may not be a taboo matter but generally people don’t discuss such issues. To the next! All the best!!