Cufón Font Replacement - Easy to Use, Great Performance

Blink Interactive — Fri, 29 Jan 2010 00:21:23 +0000

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 . 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.

Call the magic “replace” method. For example, we want to replace all the <h1> headings.

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.

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>

Launch of our blog and new site

Blink Interactive — Thu, 21 Jan 2010 22:00:21 +0000

Yes, we have redesigned our site, and added a blog. We hope you like it.

Optimistically, by creating this blog, we can have some motivation to share some interesting things with you and gain a better presence on the web.

Not only interesting things we will been blogging, but also everything about the web - business strategy, design experiences, development tricks, code snippets, technology gossip and much much more. If you like these topics, watch this space. Also feel free to leave your comments, even disagreement. Your feedback is encouraged and appreciated.

While building the blog, we also facelift the website a little bit, while still keep the simplicity. We hope you like it. Thank Wordpress for the easy-to-use blogging platform. We also recommend a cool font replacement Cufón. Hopefully we will write a step-by-step guide of using cufon later soon.

I invite you to follow us on twitter, subscribe to the feed or join us on facebook.