Cross Browser Custom Fonts For The Web

Ever wondered how to get your own custom fonts on to a website, well this post will serve you as a great help, have a read and ENJOY!

I remember back in the days when we could have fancy fonts for websites or if we did there were serious browser limitations, gone are those times.

There are a few solutions getting around and the easiest of them all is CSS3, but lets face it still too many people are using only CSS2 compliant browsers, so that's not the solution of choice.

Here is a CSS3 snip-it if your interested:

@font-face {  
font-family: yourFontName ;  
src: url( /location/of/font/FontFileName.ttf ) format("truetype");  
}  
 
/* Then use it like you would any other font */  
.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;  
}  

 

The method I use is by injecting Javascript to insert / overlay the defined text with your fount of choice.  So lets step through it.

 

Step 1

The first thing that you will need is the URL:

http://cufon.shoqolate.com/generate/

you will see 4 selection prompts you on need to use the first one to achieve what we are trying to do here, so browse for your font file that you wish to upload.

 

Step 2

Enter the class name you wish to call where it provides a text box under ‘Use the following value as the font-family of the generated font (optional)’

Here I would normally type the client or website name.

 

Step 3

Read and agree to the EULA

 

Step 4

Tick the ‘All’ box

 

Step 5

Read and agree to the terms – if you do agree of course. > Click on ‘Lets do this’

 

Step 6

Ok upon clicking on the button your browser should have downloaded a file name_number.js Where the name is the name you provided in step 2 and the number is a font defined number typically 400 or 700, so in this case my file is called gentex_400.js

 

Step 7

Now to collect all of the scripts and put them together, so we already have the downloaded script generated. we now need to get the function, we can get this directly from here or click on the download button on the cufon site and then copy and save that text, the script should be save as: cufon-yui.js (This is important)

Now for the final script we need to create a blank styles.js file and then add these lines to call the JavaScript

Cufon.replace('h5', { fontFamily: 'Gentex' });
Cufon.replace('#TitleHead', { fontFamily: 'Gentex' }); 
Cufon.replace('.H3', { fontFamily: 'Gentex' }); 
 

So you can probably see what this script is doing, we are declaring our CSS class, ID or type, this case above I am applying the javascrip font replacement method to h5, and ID of TitleHead and then a class of H3. The font family is the family we named back in step 2.

 

Final Step

Now to put it all together, because we have all of these files in separate scripts we need to call them into our Skin / template / html.

Here is how

<script src="<%= SkinPath %>scripts/cufon-yui.js" type="text/javascript"></script>
<script src="<%= SkinPath %>scripts/Gentex_400.font.js" type="text/javascript"></script>
<script src="<%= SkinPath %>scripts/styles.js" type="text/javascript"></script>

There are ways I am sure you could do to limit the amount fo scripts you have for those concerned with the amount of HTTP requests but this is only to serve as a guide in its simplest form.

Enjoy you custom fonts on your website.

Tags
CSS , Web Design , Tips and Tricks
Share

Categories

Tags

Archive