Wednesday, July 28, 2010

Web fonts using cufón

There are many ways use font on web apllication, one of them is use cufón.
cufón convert font(TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts) to JSON data.Then cufón will replace font text on your web apllication to font that you converted using cufón generator.

First we need some font that want to use. We can download font free on http://www.fontsquirrel.com/, http://www.fontyukle.com and many other websites.

Now we need to convert our font on http://cufon.shoqolate.com/generate.

If you have already converted it. Then download http://cufon.shoqolate.com/js/cufon-yui.js and save it on your javascript's folder.
Save the javascript that containing JSON data from our font on your javascript's folder too.

On your page

<script src="/javascripts/cufon-yui.js" type="text/javascript"></script>
<script src="/javascripts/fonts/Times New Roman.font.js" type="text/javascript"></script>


On your page

<div id='text_want_convert'>THIS TEXT WILL CONVERTED</div>


On your end of body tag

<script>
Cufon.replace(document.getElementById('text_want_convert') , { fontFamily: 'Times New Roman' })
</script>

No comments:

Post a Comment