Change Blog’s Font Type with Cufón

Still at the font embedding series, this time I’ll share how to change blog’s font type with Cufón. Few days ago, I write about how to change blogs font using some services. Also I’ve write about one of them, sIFR, which we know it use Flash. Cufón is different, it use javascript to render the font type.

Step 1 – Download Cufón

Download the Cufón javascript file. You can download the compressed version or uncompressed version. But I suggest you to use the compressed version.

Step 2 – Generate Font

Generate your font on its official site. The name of the resulting file will include the name of the font and the weight of the font (as a number – 400 is equivalent to “normal” and 600 means “bold”). The name of the file doesn’t actually matter at all, but it makes it easier for you to identify your fonts.

Step 3 – Integrate on the Blog

This is the step where you must add the javascript code to your blog. This code placed before </head>

<script src=”cufon-yui.js” type=”text/javascript”></script>
<script src=”Vegur_300.font.js” type=”text/javascript”></script>
<script type=”text/javascript”>
Cufon.replace(‘h1’);
</script>

Code above is just example and it use one type of font.

Step 4 – Make IE Work

Unfortunately one problem remains with Internet Explorer. In most cases, there is a short but visible delay before the text is replaced. You can avoid this issue by inserting the following code right before the closing </body> tag (or before any external scripts such as Google Analytics).

<script type=”text/javascript”> Cufon.now(); </script>

Its Done!!! Save your template and preview.

Also see

>>> Official Cufón Documentation