Image may be NSFW.
Clik here to view.
Until recently, there has been a major design limitation for website designers who care about creating a website optimized for the search engines. When you view a website on your computer, the browser can only use fonts located within your hard drive. So if a font is called and the computer doesn’t have it, the next font in the list of usable fonts is utilized. This can have disastrous effects on the look of a page as fonts different in sizes and spacing.
Historically, the way around this was to create an image of the word you wanted to use on your site in the font you liked the best. The only problem is that Google cannot read images. You could place alternative text for the image, but this doesn’t hold as much clout as say an <h1> tag to the search engines.
Well, now there is a solution that allows you to change the font on your website to anything you choose while maintaining the actual text in the code of your pages to realize all the benefits of Search Engine Optimization.
This solution is called Cufon and it utilizes JavaScript to quickly change the font on your site while the page is loading.
You can specify the exact text you want changed, whether just specific <h1, h2, etc> tags or <p> text.
Best of all, it’s free and very simple to use. I used it for the first time this morning and it took me about 10 minutes to integrate it into my website.
Here’s a quick rundown of the steps necessary to use Cufon on your website. You can use it on a WordPress site, or even a basic HTML website.
- Find a font you like and download it on Font Squirrel – http://www.fontsquirrel.com/
- Upload this file to the root folder of your website – http://cufon.shoqolate.com/js/cufon-yui.js
- Generate a JavaScript file of the font you downloaded – http://cufon.shoqolate.com/generate/
- Copy this code into the <head> section of your website
- Change ‘h1’ to whichever title or <p> text you would like to change to your new font. Change the “Vegur_300.font.js” file to the name of the font file you created in step 3.
- That should be it. Refresh your webpage and you should see the new font live on your site.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
See, simple and fast. Your design capabilities just increased immensely.
