a button system using cufón

One idea cufon inspired me, was to create a button-font that I'm able to use where I like, in which color I like, in which size I like etc. All the advantages a normal text-link has, combined with the grafical aesthetic of image-based buttons. Plus infinite scalability. Sounds nice?

the font

I've done a really simple Illustrator-file which could be easily transfered to the font-editor. You'll have to generate a font with a Font-Editor (FontForge for example). This font has to get converted at the cufon-site (with the generator) into a js-file that cufon is able to render. But I don't want to dive deeper into font-creation here, that alone is enough stuff for an own blog.

I've done a simple font covering my needs where the button-images are laying on the lowercase glyphs, which looks like that:

button
letter

Having the font, I'm able to do more stuff, like that...
v
...like that...
a p r
e i g h j p

d j m p q u v

...or, or, or.
Infinite possibilities.
No Images.
No size-limits.
All you have to do is loading cufon and the button-font roundedOne.


<head>
 ...
 <script type="text/javascript" src="path_to_js/cufon.js"></script>
 <script type="text/javascript" src="path_to_js/roundedOne_400.font.js"></script>
 ...
</head>

Place a button inside the html where needed.



<a class="myButtonClass" href="http://somewhere.com">a</a>

note: a is the letter for the home-icon.
And, on domready, tell cufon to replace.


// domready
window.addEvent('domready',function() {
 Cufon.replace('a.myButtonClass', {
  fontFamily: 'roundedOne',
  // this could be done in css too if you like
  color: '#8c520c',
  hover: {color: '#0c5185'}
 });
}); // end domready

that's all.
Next idea: using cufon for interface-elements, but I think that's something for another article. ;-)

requires: cufon, the button-font roundedOne

4 comments:

sniptsApril 23, 2010 at 11:32 AM
I'll have to proove if this is a good idea. What if the button-replacement doesn't work. You'll just get letters. Maybe using alt-property solves this.
Roland HentschelAugust 25, 2010 at 11:18 AM
Hi!

Well, it looks great on your site,
yet I don't see, how I reproduce it on my PC.
Youldn't you provide a *.zip for demonstration?
Roland HentschelAugust 25, 2010 at 11:42 AM
Me again,

I know now, why I couldn't get it running:
it works only with Mootools.
Would it be hard to make it work with jQuery as well?

( -: roland :- )
Roland HentschelAugust 25, 2010 at 11:50 AM
and me once more:

where could I get the font itself ?

Thursday, April 1, 2010