Monday, 31 January 2011

Smooth fonts. No really! Just use Cufón.

There is a little pain in this exercise, but it genuinely works. It's worth it.

You see, when I'm at my day job, I have to use Windows. It's rubbish. And particularly rubbish is the way it handles fonts through a web browser. Even IE! Knowing that lots of other poor people have to use Windows, it's important to me to try and make the fonts of my site nice and smooth. I've done quite a bit of surfing on this, but I believe I've currently got the answer. Use Cufón. Available from http://cufon.shoqolate.com.

Step 1:
Find a TTF or OTF copy if the font you would like in your page. Yes, the file.
Step 2:
Go to http://cufon.shoqolate.com and get the latest version of the JavaScript file.
Step 3:
After the style references in your web page, add a reference to the newly downloaded JavaScript file thus:
<script type="text/javascript" src="cufon-yui.js"></script>
Step 4:
Convert your font by posting it up to http://cufon.shoqolate.com, remembering to check the boxes saying "The EULAs of these fonts allow Web Embedding" and "I acknowledge and accept these terms". Completing this process gives you a .js file for your font.
Step 5:
Add a reference to the .js file you got from http://cufon.shoqolate.com thus:
<script type="text/javascript" src="my-new-font.font.js"></script>
Step 6:
Add the necessary conversions to your page thus:
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'myNewFont' });
</script>
Step 7:
Below the body tag of your page, add the line:
<script type="text/javascript">Cufon.now();</script>
This is for IE. I know!

Behold! Smooth fonts for your website. Even in Windows!


No comments:

Post a Comment