Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
Luckily, a new contender, Cufón, has made the process unbelievably simple. What makes it different? Rather than Flash, it uses a mixture of canvas and VML to render the fonts. In just a few minutes, I'll demonstrate how to use any font you wish in your web applications. Excited?
- Lightning fast!
- 100 times more simple than siFR.
- Up and running in a few minutes.
- Not dependent upon a server-side language, like FLIR is.
- The text isn't selectable - never a good thing.
- You can't apply a hover state to converted elements.
Step 1: Download Cufón
Visit Cufón's website and right-click on the "Download" button at the top. Choose "Save-As" and place it on your desktop.
Step 2: Convert a Font
In order to function, we need to use the font converter utility on the website. Alternatively, you may download the source code and convert your fonts locally. For the purposes of demonstration, I've chosen to use an obnoxious font: "Jokerman". Note - Windows users: you may have to copy the font from your "FONT" folder to the desktop for this to work.
If desired, also upload the italic and bold files as well.
Next, you'll need to choose which glyphs should be included. Don't be so quick to simply "CHOOSE ALL". Doing so will cause the JS file size to increase dramatically. For example, we probably don't need all of the Latin glyphs; so make sure they are left unchecked. In my case, I've checked the ones you see below.
Cufón allows you to designate a specific url for your file, to increase security. It's extremely important that you ensure that you have the proper privileges to use a font. REFER HERE to review the terms. If advantageous, type in your site's url into this box.
Since we're just getting started, you can leave the final two sections at their default values. Accept the terms, and click "Let's Do This". You'll then be presented with a download box asking you where to save the generated script. Once again, save it to your desktop for easy retrieval.
Calling the Script
Now, we need to decide what text should be replaced. Since our document is still blank, feel free to litter it with random tags and text. Let's try to replace the default font in all the H1 tags with Jokerman.
When we call the "replace" method, we may append a string containing the tag name that we wish to replace - in our case, all H1 tags. Save the file, and view it in your browser.
As always, IE needs a bit more to play nicely with the others. If you view this page in IE, you'll notice a slight flickr/delay before the font is rendered. To remedy, simply append:
If you won't be using a JS framework in your project, we'll simply use:
The code above states, "Get the element which has an id of "header". Then, find all of the H1 tags within this element, and "replace" them with our new font.
Method 2: jQuery
To piggyback off of jQuery's selector engine, we only need to import jQuery before Cufón.
It's as simple as that! Please note that you MUST import jQuery BEFORE your Cufón script in order for this method to work.
Believe it or not, you're finished! With just a few lines of simple code, you're free to use any font you wish! Just make sure you have permission and are compliant with type foundries’ licensing.
The main concern from the perspective of the type foundry appears to be that the typeface script generated by Cufón could be used to reverse engineer the very typeface itself.
What are your thoughts? Have a better method that I'm not familiar with?
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.