The Problem
The Internet allows for approximately 10 different typefaces to be used, which is not cool. Not that there is anything wrong with Arial, Times New Roman, and Verdana--they are great--but it seems that blogs could be a lot more interesting if they were able to use more variety.Granted, there are solutions for this. One is to use pre-rendered text (in the form of picture files). This allows for a huge range of stylistic modifications. However, it can get messy when you try to upload the file to your blog. You cannot make quick modifications without having to reopen your original picture file, editing it, re-saving it, and re-uploading it. Blah!
Another option is to use flash. It allows for lots of customization right in the webpage. However, you have to have programming skills, it doesn't work in mobile browsers, and it really doesn't work that well in any browsers. So I'm not a fan.
The Solution
The best solution I have come across is a little javascript code called Cufon. It allows you to use any typeface you like without having to make major changes to the way you already blog. You just assign a tag (such as "< h 10 >") to the font and insert the tag whenever you want to use your custom font. This post, for example, is done in a Didot typeface, which is not available to browsers normally. Here's how to do your own:The Instructions
1. Go to the Cufon font generator and fill out all the boxes using your font of choice (you do need to have the file on your computer and know where to find it). Pay special attention to the hints by the boxes and don't worry about filling out all the optional things unless you feel comfortable doing so.2. Click on "Let's do this!" at the bottom of the page and save the generated .js file to your computer.
3. Find a good place to upload the .js file online. I recommend Google Docs, Microsoft SkyDrive, or DropBox. If you don't have any of them I recommend getting at least one of them, as they are invaluable to have.
4. Once you have uploaded your .js file, find its new web address (click on the file, then choose "Share this" or the equivalent). Copy this address.
5. On your blog's website, go to the settings, choose Layout, and then choose Edit HTML (I'm assuming most people use Blogger, but the steps are similar for Wordpress).
6. Insert the following code somewhere after the < "head" > tag and before the < /head > tag:
< src="http://cufon.shoqolate.com/js/cufon-yui.js" type="text/javascript">
< src="'http://your.js.address.here/your.js.file.here.font.js'" type="'text/javascript'/">
< type="'text/javascript'">
Cufon.replace('h10');
< /script>
7. Make sure you have replace the address in the second line with the address of your typeface's .js file. Also get rid of the spaces following each "<". Finally, note that you can change the "h10" in the second-to-last line with any tag name you would like. To avoid problems I recommend leaving it at something similar, such as "h1," "h2," etc.
8. That's it, you should be set now. When you want to use your new font, just add the tag "< h 10 >" (or whichever you chose) to the front of it and remember to close it with "< /h10 >" (or whichever you chose).
The Conclusion
I have only just got this method working for me, so I'm sure there is a lot about it I still don't understand. However, it seems to be working well for me so far. There is one minor problem with it that I have noticed, and that is that the text is not highlightable in the new font, which means you couldn't copy it and search engines may not be able to index it (I'm not at all sure about this last part).One great advantage is that once you have it set up you really don't have to worry about it ever again, as long as you remember which tag you assigned it to. Plus, you don't have to use the new typeface unless you want to, so you won't get frustrated with irreversible changes. Overall, I highly recommend it for anyone that wants to add some variety to their blog and break out of the frustrating limitations of the Internet.
.jpg)
