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.
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 four 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 HostWebs.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 your blog, thus the need for a separate hosting account. During the sign-up process, be sure to choose HTML Only Mode.
5. Once your account at HostWebs.com is created, use the File Manager to upload the SWF font file and the previously mentioned 4 files.
6. From the HostWebs file manager, click on the blogger-sifr.js file to edit it. You will need to customize this file for your blog. When you open it, you’ll see something like this:
var kevinandamanda = {
};
sIFR.activate(kevinandamanda);
In the second line, where it says
Replace username with your HostWebs.com username and fontname with the exact font name of your SWF file.
*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; }'
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! :)
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:
You will need to change where it says username on all three lines to your HostWebs.com username.
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!!! :)
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:
(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, {
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:
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.
*Please Note* If you are having an issue with your HostWebs.com account or the sifrgenerator.com site, you will need to contact them for technical support.
