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.

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.


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 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 and Create An Account. If it asks you to download a file, just click Cancel.
  • Go to 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: ''

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