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 3 files for later use:
1. sIFR (a CSS file)
2. sIFR (a JavaScript file)
3. Blogger-sIFR (a JavaScript file)
file as indicated below:
Do not change file names!
Step 4: Now we need to find a place online to host those 3 files above, as well as your new SWF font file. Webs.com is a great place to do it!
Select "Personal" then press "Get Started."
Next, fill out your information. When you get to the section that says
"Select a Template for your Site," click on the 8th page and select "Custom CSS."
On the next page, there is no need to change any of the pre-selected options. Scroll down and press "Create My Site." After viewing an ad, you should be redirected to the Webs Site Builder Home. X out of it as shown in the image below.
Click on the black "File Manager" tab, then "Single File Uploader" as indicated:
Upload the 3 files you saved from earlier in the tutorial one at a time. 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.
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!
0
19 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
Thank you so much... it worked just perfect :)
i can't figure it out :(
Thank you. But it didn't work. I can't figure it out. :'(
I think Webs has changed slightly... Can you help me? :)
Hi Cassandra,
The sign-up process on webs.com has changed slightly, but all the important parts are the same. I've updated my tutorial to reflect the changes.
It looks like the main page of webs.com (after signup) has changed. There's no longer an "edit site" button, and no single file uploader to be found anywhere. I have no clue where to go once I've signed up for webs.com - all I see is this:
http://i46.tinypic.com/1075fs9.jpg
HELP!! :)
I'm stuck on the upload on Webs... I get the error message "the root directory is not writeable" when trying to upload using the new file manager. Does anyone know of a solution? Thanks!!
Hi KD,
I'm working on updating this tutorial today. Stay tuned!
i use to be able to make it work but now blogger has these new templates and im wondering if that is why it doesn't work anymore :( i can't figure it out.
Bummer. I started over at webs.com, followed all of the tutorial steps, even without the index file, and it still won't work. Guess I'm stuck with the plain, normal font for my blog posts. Sad day.
Brenna, your problem is that in the code you pasted into your Blogger HTML, you replaced all the files names with the font file name.
Here's what you have currently:
<link href='http://basicallybrenna.webs.com/digsmyhart.swf' media='all' rel='stylesheet' type='text/css'/>
<script src='http://basicallybrenna.webs.com/digsmyhart.swf' type='text/javascript'></script>
<script src='http://basicallybrenna.webs.com/digsmyhart.swf' type='text/javascript'></script>
-----------------------------------------
Replace it with this, and it should work fine:
<link href='http:// basicallybrenna.webs.com/sifr.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http:// basicallybrenna.webs.com/sifr.js' type='text/javascript'/>
<script src='http:// basicallybrenna.webs.com/blogger-sifr.js' type='text/javascript'/>
Jessica- thanks for the help!! Unfortunately, it still doesn't seem to work. But I appreciate you trying!
Post a Comment