Embeding custom fonts - Is it easy? Lets test "Cufón"
Is it really so easy to get user defined fonts online? I put one of the frameworks Cufón and set the success level to a hard term:I should be able to start from scratch, write and document what I did in less that 45 minutes!
So I better get down to business - to be fair to Cufón :-)
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!
Links
Version notes
Version 1:- The 31 minutes basic page, no layout put into it
- 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:
Text in custom fonts
Eu esse qui elit, in voluptate excepteur do.
Cillum 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.