A common hurdle in web design is the limitation of web-safe fonts. To use mockups that include those non-web-safe fonts, techniques like FLIR and sIFR have done us pretty well. However a no plugins required, widely browsers-compatible, easy to use and fast running solution, Cufón, has really become a favourable choice for web designers and developers.
Cufón’s font generator converts fonts to SVG font then to VML paths then finally into JSON with JavaScript functions. Cufón renders VML shapes for IE which natively supports VML, and another render engine use HTML5 <canvas> element. While it might sound very complicated, the font generator is fully automated and it has been prove that the performance of the renderer is very fast.
Now let’s see how you could get it running in just a few minutes.
Step 1 - Download Cufón
Step 2 - Generate a font
If you want your replaced font displays as bold or italic, you need to upload separate files for them.
Choosing all available glyphs is highly unrecommended, we found the combination of Uppercase + Lowercase + Numerals + Punctuation + Wordpress punctuation does most of the jobs. If you are unsure you can always start from the minimal combination and add more glyphs if problem occurs.
The rest options are fine on default. Make sure you agree with the laws and the terms then you’re good to submit the form and download. Simply repeat step 2 for other fonts that you want to use.
Step 3 - Prepare your HTML and replace text
Make sure your cufón-enabled pages are UTF-8 or US-ASCII encoded.
Add the main Cufón and the font JavaScript files into the HTML HEAD section.
<script src="ravie_400.font.js" type="text/javascript"></script>
Call the magic “replace” method. For example, we want to replace all the <h1> headings.
Cufon.replace('h1');
</script>
If you’re using some JavaScript frameworks such as jQuery or mootools, make sure you include the framework before Cufón and the elements selectors such as #header h1:first-child will work in the replace function.
You can use multiple fonts by specifying the fontFamily attribute with the font name you entered in Step 2.
Cufon.replace('h1' , { fontFamily: 'ravie' });
Cufon.replace('h2' , { fontFamily: 'avenir' });
</script>
Now it should work for Chrome, FireFox, Safari and Opera, however there is still one little tweak for Internet Explorer. Call Cufon.now() right before the closing </body> tag and Google Analytics or any other external scripts.
Complete
Yes, that’s it. Your HTML should look something like below.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="ravie_400.font.js" type="text/javascript"></script>
<script src="avenir_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1' , { fontFamily: 'ravie' });
Cufon.replace('h2' , { fontFamily: 'avenir' });
</script>
</head>
<body>
<h1>CSS styles are applied automatically.</h1>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>