cufon replacement

Custom Website Font with Cufon Font Replacement

How do I integrate the non-standard font you want into certain places on your web page? There are several ways you can achieve this:

Using an image editor, you convert the text into a picture and add it to the page.

Using Flash, you create a .swf file with the required text and place it in the specified place.

Using JavaScript and Cufón Font Replacement.

In this article, I will show you how to use Cufon Font Replacement to insert the desired font into a specific place on your site. But let me first mention what Cufón’s advantages are and what the ultimate effect of using it is. First of all, you can use any of your favourite fonts and visualize it on your site so it will be visible to all users on the web, or more specifically to those who did not exclude the JavaScript support option in your browser. If they have done so, the text in question will be displayed in the font that you specified by default in the style file. As we know the enlarged fonts on the web pages go “jagged”, Cufón’s other advantage is that it smoothes the font itself and makes it much more beautiful and attractive. With Cufon you can also apply different effects to the font, such as gradient, textShadow, and so on.

How to use Cufón Font Replacement:

  1. Click here and generate a .js file with the fonts you like, such as Arial_bold and save the resulting file as Arial_bold_700.font.js
  2. Make a new .js file, such as cufon_effects.js, and enter the following code:

jQuery (document) .ready (function () {

Cufon.replace (‘.boxtitle h2, .title h2’, {fontFamily: ‘Arial_bold’});
Cufon.replace (‘.boxtitle h2’, {color: ‘-linear-gradient (# 555, #ccc)’, textShadow: ‘1px 1px # 000’});
Cufon.replace (‘. Mytext h2’, {textShadow: ‘1px 1px 1px rgba (0, 0, 0, 0.6)’}};


, wherein the red colour have marked the classes of those texts from your site that you would like to visualize under Cufon. As you can see, I applied two effects as an example. If you do not use a colour effect, the font will be displayed with the colour you specified in the CSS style file.

  1. Download this file with cufon.js
  2. Now you only have to import the three .js files into your web page and you’re done.

I advise you to apply Cufon for larger font size, so the effect will be best. With a smaller font size, a slight smear is obtained, which I personally dislike.