Posts
This tutorial will show you how to use a font of your choosing for your Blogger Post Titles and Sidebar Titles. It's kind of complicated, so be sure you read the instructions very carefully!
Step 1:
Find the font you would like to use on your blog and save it on your computer (font files should end in .ttf). While there are thousands of websites that offer free fonts out there, I highly recommend you take a look at the fonts available at www.kevinandamanda.com/fonts. You can also click on the image below:
Click here to browse
adorable FREE fonts
by Kevin and Amanda!
Step 2:
Now we will need to convert this font into the type of file Blogger can use. This file is called a Scalable Inman Flash Replacement (sIFR). You don’t really need to understand how it works, just that it does work. ;)
You should now be viewing this website:
Click “Browse” and upload your desired font, then press “Next”.
*This is an example image – You cannot upload from here*
If you have uploaded your font correctly, you should see this:
Do not make any changes and press “Next”.
That should bring you to Step 3 on the website:
Again, Do not make any changes and press “Next”.
Enter the word validation as shown below:
Press “Next.” Review your font,
then press “Next.” again.
Now press “Download”. Save this file for later on! (file should end in .swf)
Step 3: Download and save these 4 files for later use:
1. sIFR (a CSS file)
2. sIFR (a JavaScript file)
3. Blogger-sIFR (a JavaScript file)
4. Index (an HTML file)
file as indicated below:
Do not change file names!
Step 4: Now we need to find a place online to host those 4 files above, as well as your new SWF font file. Webs.com is a great place to do it!
Then press “Create a Website”:
Next, fill out the information below as shown:
don’t spend too much time on this,
you’ll probably never use this site for anything
Enter the word valadation when prompted, then press “Create My Site.”
After viewing an ad, you should be redirected to the page shown below.
Click on “Single File Uploader” as indicated:
Upload the 4 files you saved from earlier in the tutorial one at a time.
When you’re through, this is what you should see:
Finally, upload your SWF file (this was the font file
downloaded from iSFR Generator).
Once it is uploaded, click on the file name.
This should open a new window that looks
similar to the one below.
Highlight and copy the URL as shown:
Keep this window open!
Step 5: Now we need to customize the “Blogger-sIFR” file to fit your blog.
Back in the Webs.com File Manager window,
click the “Edit” icon next to the “Blogger-sIFR” file as shown below:
It will open up a window similar to the one below.
The first thing we need to do is specify your custom font.
Find and highlight this code in your code editor window as shown:
Paste (Ctrl + P) the font URL that you copied prior
so it replaces the code above.
The second thing we need to do is modify your font colors. In HTML, any six-character combination beginning with # designates an object’s color. These character conformations are known as “Hex Codes.”
View the examples of Hex Codes below:
If you leave them the way they are,
your letters will be black.
You can use this Online Color Picker
to find a color to match your blog.
Just copy and paste the code!
Be sure to save your work.
Step 6: Finally, we will integrate this info to your actual blog.
Log into your Blogger Dashboard
and click on “Layout” as depicted below:
Next, navigate to “Edit HTML” as shown:
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 that line, paste the following code:
Remember to change the “username”!
<link href='http://username.webs.com/sifr.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://username.webs.com/sifr.js' type='text/javascript'/>
<script src='http://username.webs.com/blogger-sifr.js' type='text/javascript'/>
Save your work. View your blog and if everything was done
correctly, you should see your custom title fonts!
7 comments:
I love this tutorial but it seems that webs.com has disappeared as a website. They've been saying their cables are being fixed for weeks.
I just went to webs.com and signed in. Everything looks okay so I hope they're not going under!
It's working for me now too. When I googled looking for information a lot of forums were saying they had been down for weeks. Seems fishy. At least it's working...
This is not working for me. I've been doing exactly what this says, and the font won't show up. I'm not sure what I'm doing wrong :(
Just kidding, I figured it out :)
I've been trying to get this to work, and it's just not happening for me. I've gone through the tutorial dozens of times and as soon as I get to the point of saving my layout on webs.com it says that the "page is not found." And they won't respond to my emails. Booo...any ideas?
omg it works! i love you! thank you :D:D
Post a Comment