Rendering font with Javascript

October 18, 2009

Filed under: technology — Estevão Mascarenhas @ 20:06

cufon

What do you think about making your site’s texts look smooth and beautiful? Or even using custom fonts?
With Cufón you can! Check it out. :)


What is Cufón?

Basically, Cufón it’s separated in two parts: a service that generate a javascript from a font of your choice and a javascript rendering engine, to replace texts in a page, using SVG, canvas and VML.


Cool, and how can I use it?

It’s very simple, follow these steps:

  1. Access the Cúfon webpage.
  2. Download the cufon-yui.js file.
  3. Select and upload a font from your computer, that you want to use.
  4. Select “All”, in the “Include the following glyphs”, or if you want to use only in
    some special cases select, view the other options.
  5. If you want to use this only in a specific domain, type the domain in “Security” section.
  6. Read the terms and accept them to generate the file.
  7. Include these tags in the page that you want to use Cúfon, pointing to the files that you have downloaded and generated:
    <script src="cufon.js" type="text/javascript"></script>
    <!-- Here its the file that you have generated -->
    <script src="Vegur.font.js" type="text/javascript"></script>
    
  8. Use this code to render all text in h1 tag (for example) with Cúfon:
    Cufon.replace('h1');
    
  9. Be happy. :)


You can see a great example of the usage of Cúfon here.
Did you like this tip? Please comment! :)

Share:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Technorati
  • DZone
  • Live
  • MySpace
  • Reddit

Leave a Reply




Powered by WordPress