Cufón fonts for the people

I have always been looking around for an easy way of having custom fonts in web designs. As the web is evolving so quickly designer must make their designs stand out as much as possible and one way of doing this is using a custom font for a project. The easiest way for me has been either in flash or replacing text with images, recently I have been using this idea

1
2
3
4
5
6
7
8

.heading {
background:url(../img/heading.png) no-repeat;
height:40px;
width:500px;
}
.heading h1 {
display:none;
}

1
2
3

<div class="heading">
<h1>Title</h1>
</div>

You simply create the text in Photoshop with the font you want and add it as the bg set the width and height of the image then hide the h1 text. But this is bad for google as it wont pick up on the text, as a lot of the time I use this on personal projects I don’t worry about that to much.

So what is Cufón?

Cufón is a js tool which can add any font you want to a specific style on a website. Cufón aims to become a worthy alternative to sIFR (which I have only just fond out about now!), which apparently is tricky to set up and use. Following requirements were set for Cufón :

1. Absolutely no plugins required – Everything needed to display Cufón is already available by default in your visitor’s browser. Rather than requiring flash to make the switch, Cufón relies simply on javascript alone.
2. Compatibility – Cufón runs on IE6, 7, 8, Firefox and the latest version of Safari. On other unsupported browsers (IE5-, Safari 2) it will fail gracefully.
3. Ease of use – Little or no configuration required.
4. Speed – Cufón is quick. It loads almost instantly with no ‘flicker’ that you would normally experience with sIFR.

Benefits

- Fast, Simple to use and gives you what you want when you want.

Down sides

- It runs on js so if its disabled it will run default fonts and it cant be selected.

Setting up is easy

Start by downloading it from the Cufón website save it where you will remember it like your desktop.

Next you need to convert a font you would like to use you are still using there website at this point. Make sure that the font is not in your fonts folder so copy it to your desktop or another folder otherwise it wont let you upload it.

you have options to upload the italic version as well, make sure you have permission to use the font file and make sure you check to box.

Watch out for this, if you select all you will end up having a slightly larger js file, so if like me you know what you will be using just select the ones u need, I don’t really need lowercase just the i, so i will include the i at the bottom and uncheck lowercase.

I have left the next sections alone and it seems to be fine, but if you do want to experiment with them you can. Check the ‘I acknowledge and accept these terms’ then click the Let’s do this! button.

Download the js file to somewhere you will remember like your desktop. Next thing to do is to set it up.

So make a new folder and create a new HTML doc and call it index. Then a new folder called fonts. Move your downloaded font and place it into the fonts folder. Rememeber the file you downloaded of the Cufon Website called sorccu-cufon-28fff6bacfe9c791defde7cea4cd7c84e0a5d854 there will be a file folder called js and inside that there will be the brains of the whole thing called cufon.js copy that into your js folder.

Im going to use jquery on this one, make sure you include it before the cufon.js file.

1
2
3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="js/cufon.js" type="text/javascript"></script>
<script src="fonts/MicrogrammaDMedExt_400.font.js" type="text/javascript"></script> <script type="text/javascript"></script>
<h1>FONT USING CUFON</h1>

This will get you your custom font on your h1 tags, but you can attached it to any class/id that you want.

A few additional options are below

To add a gradient

1
2
3

Cufon.replace('h1', {
color: '-linear-gradient(#ffa509, #ff4e09, rgb(0, 0, 0))'
});

To use multiple fonts you will use this

1
2

Cufon.replace('h1', { fontFamily: 'MicrogrammaDMedExt' });
Cufon.replace('h2', { fontFamily: 'Vegur' });

Combine Styles

1
2
3
4

Cufon.replace('h1', {
color: '-linear-gradient(#474747, #1f1f1f, rgb(0, 0, 0))',
textShadow: '2px 2px 2px #ffc600'
});

:Hover States

You can add hover states by enabling the hover attribute nice and easy, then you style the css to do what you want to do to it.

1
2
3

Cufon.replace('h1 a', {
hover: true,
});

Yeh I know! The colors aren

Hey, my name’s Kevin, I love hockey and the internet. I like my rock music and its great to just plug in and get the designs flowing. I love chicken wings, the more hot sauce on them the better and I have 3 kidneys...You can find me on multiple social networking sites, so come say hi. I hope at least one post on here is useful to you!

• Delicious
• Design Float
• Digg
• stumble
• twitter
• Reddit