Cufon to render input text on submit

I have been looking at font sites 开发者_开发问答that render input text in the chosen font when submitted, and wondered how this could be done with Cufon.

An example such as here:

http://www.fontsquirrel.com/fonts/Nobile#testdrive - choose the test drive tab

and here:

http://new.myfonts.com/fonts/lucassharp/hera-big/ scroll down to enter your own sample text.

try this

<div class="btn_submit btn_normal spacer-100 ">
<h2>Next</h2>
<input type="submit" name="submit"   value="" class="btnsubmit" />
</div>


/*Required CSS*/
.spacer-100{width:100px;}

.btn_submit{margin:22px auto; overflow:hidden; position:relative;
 padding:2.5% 3%;
 background: #e0efff;    background-repeat:repeat;
 background: -webkit-gradient(linear, left top, left bottom, from(#f9fcff),   to(#e0efff));
 background: -moz-linear-gradient(center top, #f9fcff, #e0efff);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fcff', endColorstr='#e0efff');
 border-top:1px solid #e2effc; border-right:1px solid #a8cae9;border-bottom:1px solid #91bbe0;border-left:1px solid #e2effc;

 }
.btn_submit:hover{
background: #a8cae9;    background-repeat:repeat;
background: -webkit-gradient(linear, left top, left bottom, from(#f9fcff), to(#a8cae9));
background: -moz-linear-gradient(center top, #f9fcff, #a8cae9);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fcff', endColorstr='#a8cae9');
border-top:1px solid #e2effc; border-right:1px solid #a8cae9;border-bottom:1px solid #91bbe0;border-left:1px solid #e2effc;

}
.btn_submit h2{color:#002e4f; font-size:22px;  text-align:center;}
.btn_submit input[type="submit"]{position:absolute; left:0px; top:0px; z-index:5;     display:block; overflow:visible; border:0px none; background:none; height:46px;    cursor:pointer; }


  ////////--------- required Jquery

 $(document).ready(function(){
var wt = $('.btn_normal').width();
var ht = $('.btn_normal').height();
$('.btnsubmit').css({width:wt+25}) //25 is the button padding
})