Finding the site00:00

Put Cufón in a Google search box, and voila! I have the site:
The usage page

Now I have a description to follow, which is what I will do

Step 1 – Get cufón!09:00

Download the javascript file cufon-yui.js and add it to this document.

Step 2 – Generate a font14:00

Using the online font generator: cufón - fonts for the people to generate a font "Balthazar Regular" (C:\Windows\Fonts\BALTH___.TTF).

Uploaded... and 2 minutes later the Balthazar_500.font.js file was saved and included!

Step 3 – Replacing text20:00

I do some copying of the shown example HTML code to this page, for instance:

<script type="text/javascript">
  Cufon.replace('h1.Cufon', { fontFamily: 'Balthazar' });
</script>

And it works (well in Firefox, guess I have to do what is written in step 4 to get MSIE working!)

Step 4 – Making Internet Explorer behave25:00

Not that it is happening often (now that is ironi!) some hacks have to be done to make it work in MSIE too :-)
So I follow step 4 on the webpage:

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

Conclusion31:00

Well - it was easy to make it work in Firefox, but until now it has not worked in MSIE.
Perhaps it is because it is running locally, so I will cross my fingers that it works online!
But 5 start to Cufón! I did this in only 31 minutes writing the test as I implemented it!

Google Webfonts - 2010/05/24

I just discovered that Google also have a go at this area - client side font embedding - Google Webfonts (Thanks to Morten).
I have included the font to this page too - took around 4 minuts!
Here you can see information about the font I used: http://code.google.com/webfonts/family?family=IM+Fell+English#specimen.

Links

Version notes

Version 1:
  • The 31 minutes basic page, no layout put into it
Version 2:
  • Has had a graphical and layout brush-up.
  • Added one more font: Bookman Old Style, which I choose to limit to my domain.
  • Added links (thanks to Morten for the link Cufon vs sIFR vs FLIR).
  • Form elements (input, textarea etc) does not work:

Sten Hougaard

My blog where you can leave comments about this article


Text in custom fonts

Voluptate culpa adipisicing velit proident irure, ad ex non. In ipsum dolor. Aute officia dolore. Id esse ut ullamco pariatur elit nostrud.

Eu esse qui elit, in voluptate excepteur do.
Sten HougaardCillum voluptate, dolor labore ut non ea, irure ullamco. In elit sed veniam commodo, ut id reprehenderit occaecat adipisicing id sed deserunt ut nulla et, voluptate dolor irure! Velit minim labore, dolore minim, nisi sunt amet, nulla do ad aliquip ut, eu, incididunt dolor. Ipsum cupidatat deserunt et non cillum nostrud ea ut voluptate consectetur dolore ut minim eu, incididunt qui.

Nulla officia labore aliquip excepteur magna elit reprehenderit ut consequat voluptate aliquip officia ullamco.

Occaecat qui in consectetur culpa minim sit qui est dolore occaecat, minim veniam dolore dolore laboris.

Exercitation dolore laboris, magna esse culpa tempor deserunt laboris officia aliquip, mollit dolor est.