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:
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; }'
,'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! :)
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!!! :)
Read More http://www.kevinandamanda.com/whatsnew/tutorials/how-to-use-a-cute-font-for-your-blogger-post-titles.html#ixzz1bTZ1syfi