Google Font Selector Demo using Google Fonts

Simple Font Selector Control Demo using Google Fonts

HTML

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Droid+Sans|Open+Sans|Josefin+Slab|Arvo|Lato|Vollkorn|Abril+Fatface|Ubuntu|Old+Standard+TT|Lobster|Bevan|Berkshire+Swash">
<select id="fontSelector">
    <option>Tangerine</option>
    <option>Inconsolata</option>
    <option>Droid Sans</option>
    <option>Open Sans</option>
    <option>Josefin Slab</option>
    <option>Arvo</option>
    <option>Lato</option>
    <option>Vollkorn</option>
    <option>Abril Fatface</option>
    <option>Ubuntu</option>
    <option>Old Standard TT</option>
    <option>Georgia</option>
    <option>Arial Black</option>
    <option>Times New Roman</option>
    <option>Lobster</option>
    <option>Bevan</option>
    <option>Berkshire Swash</option>
</select>
<div id="dFontSample">Your sample text</div>

CSS

body {
        font-family: 'Tangerine';
        font-size: 32px;
      }

JavaScript

/*Simple Font Selector Control Demo using Google Fonts */
$("#fontSelector").on("change", function() {
    $("#dFontSample").html($(this).val() + ": Your Sample Text"); 
    $("body").css("font-family", $(this).val()); 
})