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






2297
Ana May 15, 2012 at 4:32 pm

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

Reply

2298
Brittany May 19, 2012 at 5:30 pm

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

Reply

2299
alana June 6, 2012 at 9:47 pm

webhost no longer has the html only mode…im lost as far as where i should go from here…

Reply

2300
Ann June 10, 2012 at 12:38 pm

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!

Reply

2301
Nicole June 27, 2012 at 9:38 pm

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

Reply

2302
Dareen July 1, 2012 at 5:54 pm

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

Reply

2303
myra July 3, 2012 at 2:24 pm

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

Reply

2304
Robert Bloecker July 3, 2012 at 4:09 pm

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.

Reply

2305
Jen July 9, 2012 at 1:17 pm

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!

Reply

2306
Amber July 11, 2012 at 11:01 pm

webstarts.com! ;)

2307
Bina July 11, 2012 at 12:44 am

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

Reply

2308
Amber July 11, 2012 at 11:01 pm

webstarts.com! Try that! ;)

2309
Amber July 11, 2012 at 11:00 pm

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

Reply

2310
Rachel July 17, 2012 at 12:57 pm

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?

Reply

2311
Jen July 19, 2012 at 1:36 pm

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?

2312
Heather K. July 21, 2012 at 6:08 pm

Startwebs.com charges a monthly fee to be able to edit your html. Any other suggestions? I’d love to do this!

2313
Jen July 19, 2012 at 1:34 pm

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?

Reply

2314
Siti Maisarah Zulhaimi August 10, 2012 at 5:53 am

THANKS!!!! <3

Reply

2315
Aubrey August 14, 2012 at 12:24 am

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!

Reply

2316
Whitney August 21, 2012 at 7:37 pm

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

Reply

2317
Alex Anne August 22, 2012 at 4:27 pm

Me too! It’s a super sketchy website!

2318
Ms. K August 26, 2012 at 10:52 pm

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?

Reply

2319
KOcreative September 4, 2012 at 3:22 am

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!

Reply

2320
Nicole September 5, 2012 at 11:07 pm

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

Reply

2321
Stephenie September 7, 2012 at 2:00 pm

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

Reply

2322
Natalina September 24, 2012 at 6:48 am

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!

Reply

2323
Kelsi September 30, 2012 at 11:47 pm

Is there any way to upload your font to Blogger without changing code? I’m not tech savvy at all.

Reply

2324
heather October 4, 2012 at 10:41 am

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?

Reply

2325
Aubrey October 5, 2012 at 9:23 am

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!

Reply

2326
Tasha October 18, 2012 at 11:32 pm

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!

Reply

2327
Melissa Hawley October 26, 2012 at 6:38 pm

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.

Reply

2328
chris October 30, 2012 at 2:49 pm

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!

Reply

2329
Lesley March 16, 2013 at 10:25 pm

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

2330
LaDonna November 9, 2012 at 5:05 pm

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.

Reply

2331
Charlotte April 27, 2013 at 11:33 am

I’m having this same problem. It says that the file isn’t working on dropbox. Any help?

2332
Lacey November 11, 2012 at 1:47 pm

Thanks for this! I’ve been looking for a breakdown on how to use all of my favorite fonts. I appreciate it!

Reply

2333
Jenessa November 27, 2012 at 2:48 pm

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

Reply

2334
Jenessa November 27, 2012 at 2:53 pm

I was able to google how to fix my blog, but the guidelines still don’t fit dropbox anymore

2335
Riza November 30, 2012 at 1:33 am

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

Reply

2336
Courtney December 4, 2012 at 2:15 pm

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!

Reply

2337
Ashtan December 11, 2012 at 10:15 am

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

Reply

2338
stacy December 23, 2012 at 6:14 pm

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?

Reply

2339
Cami December 28, 2012 at 1:36 pm

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?

Reply

2340
Stephanie May 22, 2013 at 6:29 pm

You don’t need the pro version. Instead of looking for the public folder, upload her files, get the link by clicking on the little chain link icon next to the file, then place the link in the HTML code as she instructed- change the www to dl though like she did in her files. Hope that helps!

2341
Lydia December 29, 2012 at 9:33 pm

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?

Reply

2342
Stephanie May 22, 2013 at 6:28 pm

When placing your dropbox codes in your HTML file, you have to change the www to dl. You will notice Amanda’s is setup like this also. Hope that helps- she doesn’t mention that in her instructions.

2343
WY January 2, 2013 at 5:12 pm

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

Reply

2344
Krystal July 8, 2013 at 2:26 pm

I’m having the same issue. I haven’t found a solution yet. Did you ever figure it out?

2345
rebecca January 3, 2013 at 1:22 pm

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!

Reply

2346
Stephanie May 22, 2013 at 6:27 pm

She originally had us store them at webs.com.

2347
Marcia Cox January 4, 2013 at 11:34 am

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

Reply

2348
Erin @ The Impatient Gardener January 10, 2013 at 12:45 pm

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

Reply

2349
Laureen January 20, 2013 at 11:54 am

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 ♥

Reply

2350
Stephanie May 22, 2013 at 6:26 pm

When placing your dropbox codes in your HTML file, you have to change the www to dl. You will notice Amanda’s is setup like this also.

2351
Kelly January 30, 2013 at 3:10 pm

Thank you SOOO much!! This was exactly what I was looking for and it worked perfectly. Really easy to follow and well written. Thanks!!!

Reply

2352
Emily February 18, 2013 at 9:25 am

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?

Reply

2353
Riri February 24, 2013 at 6:07 am

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

Reply

2354
Jessi Soechting March 8, 2013 at 8:32 pm

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.

Reply

2355
Amanda March 21, 2013 at 11:05 pm

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?

Reply

2356
Laura Bean April 1, 2013 at 8:57 pm

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

Reply

2357
Laura Bean April 2, 2013 at 8:12 pm

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.

2358
Savannah April 9, 2013 at 5:27 am

I’d like to open an account Preteen Panty Models maria is good

Reply

2359
Trisha D. April 17, 2013 at 3:45 pm

When the font is too big, one can use http://www.cms-guide.com/online-font-creator/

Reply

2360
Danna April 20, 2013 at 5:49 pm

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!

Reply

2361
Nancy Davis June 7, 2013 at 3:54 pm

Hello! Thank you for allllllll that you do for us. I cannot get the SWF generator to complete the action. Any suggestions?

Nancy

Reply

2362
Alexa June 12, 2013 at 4:18 pm

I made sure the file was unzipped, that it was a ttf file, and left all the settings on the swf converter site as they were, but it won’t save them as sifr files, I just keep getting this message over and over again:

“Font data DefineFont3 not found in xml/template-sifr3-r436.xml”

I’ve tried it with two different fonts. What am I doing wrong?

Reply

2363
Carrianne June 16, 2013 at 10:49 pm

Hi Amanda,

Thanks so much for this tutorial, it’s super helpful!
I just joined blogger and I tried this tutorial out, but for whatever reason it’s not working for me. I went through your FAQ, double and triple checked everything, restarted my computer, and even tried it on a different computer as well. Nothing has helped. You by chance wouldn’t have any other suggestions, would you?

Thanks!

Reply

2364
Casey December 5, 2013 at 7:54 pm

I’m in the same boat… I did everything you said, checked and rechecked… Mine all matched yours, except for my links! What am I doing wrong? Have things changed since you wrote the post?

2365
Casey December 5, 2013 at 7:58 pm

when you say to put it above should I be going in front of the word head and hitting enter to make a new line and then pasting it in? This is the only thing I can think of!

2366
Danielle July 1, 2013 at 3:29 pm

I got it to work but how do I center the titles and the date? Also, how do I get the cute font on my gadgits on my layout page? Like where is says blog archive, follow by email, followers, ect? URL http://www.thekissmedarlingblog.com

Reply

2367
Danielle July 1, 2013 at 3:42 pm

HELP! Okay I figured out how to get the font on my sidebar but all of the fonts are to the right side and I want them to be centered. I used your adorable Pea Twist Me Pretty font (LOVE IT!) how do I get it centered?

Reply

2368
فك السحر والربط July 31, 2013 at 3:33 pm

Thanks for a marvelous posting! I quite enjoyed reading it,
you’re a great author. I will ensure that I bookmark your blog and may come back from now on. I want to encourage continue your great posts, have a nice weekend!

Reply

2369
Susan August 8, 2013 at 3:21 pm

I am also having trouble with my sidebar fonts. I searched through my html code and the only possible names I could find for my right sidebar is “sidebar,” or “sidebar-right” and neither of those have worked. The titles are working, just not the sidebar (I only have one sidebar). Help?

Reply

2370
Emily Larkin August 13, 2013 at 10:37 am

Hey I am having a hard time converting the file from zipped to unzipped so i can download it to make it a sIFR file ahhhh help!!!!!!!

Reply

2371
ashley September 7, 2013 at 8:11 pm

im soo confused , im on and 6 , I took the file blogger-sifr.js and copied it to my notepad but all this writing came up and there was not websites connected. im confused I don’t know how make it a file too

Reply

2372
Melody September 12, 2013 at 12:21 am

I tried to convert your font into swf file, and it kept showing that there is error. Can you please help me?

Reply

2373
caesardwi October 21, 2013 at 4:04 am

THANK YOU THANK YOU! I love what it added to my blog! check it out at Free Download Latest Software | Game

Reply

2374
free download late Software | game October 21, 2013 at 4:13 am

I’m really impressed with your writing talents as well as with the layout on your weblog. Is this a paid topic or did you customize it your self? Anyway keep up the nice quality writing, it’s uncommon to see a great weblog like Caesar Dwi

Reply

2375
Tariqur Rahman November 4, 2013 at 8:35 am

all fonts is very cool.i like all fonts very much.I try this.

Reply

2376
Laura November 5, 2013 at 5:05 pm

Thanks! I haven’t tried it yet, but I’m definitely pinning it so I can refer back when I’m ready. I appreciate the tutorial.

Reply

2377
Laura November 6, 2013 at 12:34 pm

Wow…that’s a lot of work, and I did it all…BUT I can’t seem to edit my template? I can get in there and type things but it wont save. IT says saving forever and then all the text I just typed in disappears.

Reply

2378
Mira December 16, 2013 at 11:52 am

Hi Amanda,
you are one of a kind!!!
This post is really, really helpful to those who blog with blogger (I guess). I woud love to use it as well but I post with wordpress. Do you see a chance?
Hopefully you understand my problem a) I’m a really bloody beginner in “Blogging” and b) I live in Germany, so my english is not the best.
Thank you ;-)
Mira

Reply

2379
Bethany March 5, 2014 at 8:03 pm

I know it has already been said, but thank you so much for this. I tried a few other tutorials to customize the font and couldn’t get them to work – yours worked! Now if I can just figure out how to get that font to show up on iPads and similar devices that would be extra awesome. It looks pretty much the way I want for now on my laptop, but my iPad still loads the older version. Your whole website has been a lot of help. Thank you for all the time you’ve put in!

Reply

2380
Atiqur Sumon May 9, 2014 at 5:39 am

How To Use A Cute Font For Your Blogger Post Titles this is impressive title also.

Reply

2381
Iuliana@hip2thrift June 3, 2014 at 7:38 pm

So, along the life of my blog I have made different changes in my html including about the post title. Now I have no idea what tutorial I’ve used and have tried yours and read through all the comments to make sure I’m not missing anything and nothing happened. I’m wondering if this code is conflicting with one I’ve put in the past, which like I said I wouldn’t know where to find in my html because I don’t remember.

Reply

2382
Mobile web July 28, 2014 at 11:01 pm

create a mobile friendly version, create your fully customized mobile site, start selling websites.
Just for follow the link : http://todayone.com.au/

Reply

2383
Melinda August 4, 2014 at 5:59 pm

Hi Amanda,
I used your css for my personal blog and it worked fine for me. It made my blog look so cute! But that was when Blogspot used the Minima template. Now I have a new blog and I’m using the Simple template and when I put the CSS in it won’t work. I made sure to not delete or change anything I’m not supposed to and I double checked everything, but it won’t work. Any help would be great. Also, I LOVE your blog. I’ve been a viewer for years. :D

Reply

2384
Pranita September 4, 2014 at 12:05 am

Hi Amanda! Thank you so much for this, I just tried it on my blog with the pea snoflake font and it worked! Simply mind-blown!

Reply

2385
Brianna September 13, 2014 at 4:23 pm

I am going from step 4 to 5 and am confused. I am new to all of this, including dropbox. Dropbox has changed and I don’t see a way to copy the font to a clipboard. I am also confused as to why we are putting it in dropbox. When I try to copy the file, this is what I get: https://www.dropbox.com/s/spy0wg7mhopwfyr/peabecki%284%29%20%281%29.swf?dl=0

please help!

Reply

2386
Carmen September 24, 2014 at 11:19 am

Brianna, you are not the only one. I had my files hosted on webs.com and that apparently doesn’t work anymore, so I tried the dropbox way. Problem is that there is no public file anymore, which I think is the problem. You can make your files a sharing file, but you have to add in an email of someone to share it with. I’m not positive, but I think that’s why it’s not working. I’ve tried everything (except maybe the “right” way) and I’m not sure what else to do. :/

Reply

Comment Pages: « Previous1...1920212223

Leave a Comment