Font selector

fontselect.js

$(function() {
  var fonts = [];
  fonts.push({
    name: 'Helvetica+Neue',
    weight: [100, 300, 400, 700],
    loaded: true
  });
  fonts.push({
    name: 'Noto+Sans',
    weight: [400, 700]
  });
  fonts.push({
    name: 'Ubuntu',
    weight: [300,400,500,700]
  });
  fonts.push({
    name: 'Cousine',
    weight: [400, 700]
  });
  fonts.push({
    name: 'PT+Sans+Caption',
    weight: [400,700]
  });
  fonts.push({
    name: 'Roboto',
    weight: [400,300,500,700,900]
  });
  fonts.push({
    name: 'Roboto+Condensed',
    weight: [400,300,700]
  });
  fonts.push({
    name: 'Open+Sans+Condensed',
    weight: [300]
  });
  fonts.push({
    name: 'Open+Sans',
    weight: [400,300,700,800]
  });

  var font_list_string = '';
  var font_list_options_string = '';
  $(fonts).each(function(key, value) {
    if(font_list_string != '') {
      font_list_string += '|';
    }
    if(!value.loaded) {
      font_list_string += value.name + ':' + value.weight.join(',');
    }
    font_list_options_string += '<option>' + value.name.replace(/\+/g, " ") + '</option>';
  });

  var redrawWeightList = function() {
    var name = $('.font-select').val().replace(/\ /g, "+");
    var font = $.grep(fonts, function(f){ return f.name == name})[0];

    var font_weight_options_string = '';
    $(font.weight).each(function(key, weight) {
      font_weight_options_string += '<option>' + weight + '</option>';
    });

    $('.font-weight-select').html(font_weight_options_string);
  };

  $('head').append('<style>@import url(http://fonts.googleapis.com/css?family=' + font_list_string + '&subset=latin,cyrillic);</style>');
  $('body').append('<div style="position:fixed; top:80px; right:0; width:300px; height:50px; z-index:9999999999"><select class="font-select">' + font_list_options_string + '</select><select class="font-weight-select"></select></div>');

  $('.font-select').change(function() {
    var $this = $(this);
    var name = $this.val();
    $('body').attr('style', "font-family: '" + name + "' !important;");
    redrawWeightList();
  });

  $('.font-weight-select').change(function() {
    var $this = $(this);
    $('body').css('font-weight', $this.val());
  });

  redrawWeightList();
});