Page 1 of 1

Loading fonts using Cufon - Javascript Rate Topic: -----

#1 m-e-g-a-z  Icon User is offline

  • Winning
  • member icon


Reputation: 496
  • View blog
  • Posts: 1,453
  • Joined: 19-October 09

Posted 02 February 2011 - 03:44 PM

Loading fonts using Cufon - Javascript


This tutorial will cover a way of using non proprietary fonts on webpages using the Cufon javascript library.


Right, first of all, pick a nice font you like, in this tutorial I will be using Euphemia although you can choose any other fonts which can be found here. Please remember that Cufon only accepts the following font types:


  • TrueType (TTF)
  • OpenType (OTF)
  • Printer Font Binary (PFB)
  • PostScript fonts


Once you have chosen a font, download it and upload it to the Cufon website here.

You will need to fill out the relevant sections and do not pick something you will not be using such as Cyrillic Alphabet for example. Picking only what you need will make the javascript smaller.

In this case, I have done the following:

-Uploaded Font into Regular typeface.
-Selected Uppercase
-Selected Lowercase
-Selected Numerals
-Selected Punctuation
-Typed in domain *For Security Section*


Within the security section on the Cufon website, you will need to provide the domain of your website. If you don't do this, you will not see the text.

Once you have filled out the relevant sections and submitted the form, you will recieve a response to download the javascript file.

Once you have downloaded the file, place it in a directory and refer to the js file like this.

The file it gave me is called Euphemia_400.font.js and I put it in a directory called js.

So you would insert it like this.

<script src="js/Euphemia_400.font.js" type="text/javascript"></script>


You will also need to include the Cufon library which can be found here.

Include it in the script like this

<script src="js/cufon-yui.js" type="text/javascript"></script>


Once you have followed these steps, we will now use the Cufon API to load and apply styles to our page. The Cufon API can be located here .

So lets get some script tags open like this..

<script type="text/javascript">

</script>


Once we have done that, we will then need to put in some Cufon javascript. Below is a function called replace which replaces the text and applies styles such as color which changes the text to blue and fontWeight which makes it bold. The selector in the example below is 'h2' tags but you can make it whatever you want it to be as long as it's valid. This means that it will replace all h2 tags to the styles mentioned above.

Cufon.replace('h2', {
        color: '#26548B;',
        fontWeight : 'bold'
});




So for example, we have some html below that contains h2 and h3 tags.

<h2>This is a </h2>
<h3>Cufon Test</h3>



We can then define some javascript to change these fonts and styles below like this.

<script type="text/javascript">
Cufon.replace('h2', {
        color: '#26548B;',
        fontWeight : 'bold'
});

Cufon.replace('h3', {
        color: '#8ED6FA;',
        fontSize: '16px;'
});
</script>



The output should look like this

http://doc.gold.ac.u...01za/cufon.html

Is This A Good Question/Topic? 1
  • +

Replies To: Loading fonts using Cufon - Javascript

#2 poiu07  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 27-June 11

Posted 27 June 2011 - 02:00 PM

here's another link some may be interested in. you'll have to do a little searching around in it, but there are TONS of good usable fonts. Windows fonts
Was This Post Helpful? 0
  • +
  • -

#3 singularity  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 184
  • Joined: 17-October 08

Posted 03 July 2011 - 11:33 AM

View Postm-e-g-a-z, on 02 February 2011 - 10:44 PM, said:

Loading fonts using Cufon - Javascript


This tutorial will cover a way of using non proprietary fonts on webpages using the Cufon javascript library.


Right, first of all, pick a nice font you like, in this tutorial I will be using Euphemia although you can choose any other fonts which can be found here. Please remember that Cufon only accepts the following font types:


  • TrueType (TTF)
  • OpenType (OTF)
  • Printer Font Binary (PFB)
  • PostScript fonts


Once you have chosen a font, download it and upload it to the Cufon website here.

You will need to fill out the relevant sections and do not pick something you will not be using such as Cyrillic Alphabet for example. Picking only what you need will make the javascript smaller.

In this case, I have done the following:

-Uploaded Font into Regular typeface.
-Selected Uppercase
-Selected Lowercase
-Selected Numerals
-Selected Punctuation
-Typed in domain *For Security Section*


Within the security section on the Cufon website, you will need to provide the domain of your website. If you don't do this, you will not see the text.

Once you have filled out the relevant sections and submitted the form, you will recieve a response to download the javascript file.

Once you have downloaded the file, place it in a directory and refer to the js file like this.

The file it gave me is called Euphemia_400.font.js and I put it in a directory called js.

So you would insert it like this.

<script src="js/Euphemia_400.font.js" type="text/javascript"></script>


You will also need to include the Cufon library which can be found here.

Include it in the script like this

<script src="js/cufon-yui.js" type="text/javascript"></script>


Once you have followed these steps, we will now use the Cufon API to load and apply styles to our page. The Cufon API can be located here .

So lets get some script tags open like this..

<script type="text/javascript">

</script>


Once we have done that, we will then need to put in some Cufon javascript. Below is a function called replace which replaces the text and applies styles such as color which changes the text to blue and fontWeight which makes it bold. The selector in the example below is 'h2' tags but you can make it whatever you want it to be as long as it's valid. This means that it will replace all h2 tags to the styles mentioned above.

Cufon.replace('h2', {
        color: '#26548B;',
        fontWeight : 'bold'
});




So for example, we have some html below that contains h2 and h3 tags.

<h2>This is a </h2>
<h3>Cufon Test</h3>



We can then define some javascript to change these fonts and styles below like this.

<script type="text/javascript">
Cufon.replace('h2', {
        color: '#26548B;',
        fontWeight : 'bold'
});

Cufon.replace('h3', {
        color: '#8ED6FA;',
        fontSize: '16px;'
});
</script>



The output should look like this

http://doc.gold.ac.u...01za/cufon.html


Unfortunately your link results in 404 Not found error, would you mind posting the final output again.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1