Is there an shorter or more direct way to set the value of this fontpicker?
<p>I am using the fontselector found <a href="https://bitbucket.org/lindekleiv/jquery-ui-fontselector/src/f8196e52c014ae056eb089a3b8eb3a5fe873ae85/jquery.ui.fontSelector.js?at=master" rel="nofollow">here</a>. I didn't see a way to manually set the font, so I came up w/ my own. Being a newb I was wondering if there's an easier way to manually set the selected font than what I have. I tried to make sense of their .js file but I couldn't figure it out to see if there's an easier way to do what I want.</p>

<p><a href="http://jsfiddle.net/nPmYD/" rel="nofollow">my fiddle</a> /// STACK OVERFLOW WOULDN'T LET ME POST THE JS links...see my fiddle</p>

<pre><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"/&gt;


/// STACK OVERFLOW WOULDN'T LET ME POST THE JS links...see my fiddle


    &lt;script&gt;
    $(document).ready(function(){
           $('#fonts').fontSelector({
            fontChange: function(e, ui) {
                $('span.handle').html('&amp;#9660;');
                $('ul.fonts').hide();
                $(".fonts").children().removeClass('selected'); // remove the "selected" class on everything
            }
           });

           $("#changeFont").on("click",function(){
               var selectedFont = "Ruda";
               $(".fonts").children().removeClass('selected');
               $(".fonts").find("li:contains(Ruda)").addClass('selected');
               $('div.fontSelector h4.selected').text("Ruda").css("font-family","Ruda");
           });
    });

    &lt;/script&gt;

&lt;/head&gt;


&lt;body&gt;

&lt;button id="changeFont"&gt;Change Font&lt;/button&gt;
&lt;select id="fonts"&gt;
  &lt;option value="Chelsea Market"&gt;Chelsea Market&lt;/option&gt;
  &lt;option value="Droid Serif" selected="selected"&gt;Droid Serif&lt;/option&gt;
  &lt;option value="Ruluko"&gt;Ruluko&lt;/option&gt;
  &lt;option value="Ruda"&gt;Ruda&lt;/option&gt;
  &lt;option value="Magra"&gt;Magra&lt;/option&gt;
  &lt;option value="Esteban"&gt;Esteban&lt;/option&gt;
  &lt;option value="Lora"&gt;Lora&lt;/option&gt;
  &lt;option value="Jura"&gt;Jura&lt;/option&gt;
&lt;/select&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
