Google Font API Example

This is a very simple example of Google Font API.
Select font-family you like and type in the input field.

HTML:

<div>
   <select id="fonts"></select> &nbsp;
   <input type="text" id="fontInput" value="Google Font API Example" />
   <div id="fontCanvas" style="display:none;"></div>
 </div>

CSS:

<style type="text/css">
#fontCanvas {
  font-size:48px; padding:12px;
  line-height:48px;
  background-color: #222;
  color: #fff;
  margin: 12px 0;
}
</style>

JavaScript:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('webfont', '1');

google.setOnLoadCallback(function() {
  var
    $f = $('#fonts'), 
    $fi = $('#fontInput'),
    $fc = $('#fontCanvas'),
    opts = [],

    // @see Font Directory http://code.google.com/webfonts
    fonts = ['IM Fell DW Pica', 'Reenie Beanie', 
             'Tangerine', 'Lobster', 'Cantarell'];

  WebFont.load({google: {families: fonts}});

  for (var i in fonts) {
    opts.push('<option value="' + fonts[i] + '">' + fonts[i] + '</option>');
  }
  $f
    .html(opts.join(''))
    .change(function () {
      var font = $(this).val();
      $fc.css({fontFamily: font}).text($fi.val());
    });

  $fi
    .keyup(function () {
      var font = $f.val();
      $fc.css({fontFamily: font}).text($fi.val());
    })
    .trigger('keyup');

  $fc.fadeIn(550);
});
</script>