How to make use of it:

1. Load the stylesheet jquery.fontpicker.css and JavaScript jquery.fontpicker.js within the HTML file.

<link href="/path/to/dist/jquery.fontpicker.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.fontpicker.js"></script>

2. Create a standard enter subject for the font picker.

<input id="myFontPicker" type="text">

3. Just name the function fontpicker on the input subject and the plugin will handle the remaining.

$('#myFontPicker').fontpicker();

4. Apply the chosen font household to a given element utilizing the change occasion.

function applyFont(element, fontSpec) {

  // Split font into family and weight/style
  var tmp = fontSpec.split(':'),
    family = tmp[0],
    variant = tmp[1] || '400',
    weight = parseInt(variant,10),
    italic = /i$/.test(variant);

  // Set selected font on paragraphs
  var css = {
    fontFamily: "'" + family + "'",
    fontWeight: weight,
    fontStyle: italic ? 'italic' : 'normal'
  };

  $(element).css(css);
  
}

$('#myFontPicker').fontpicker()
.on('change', function() {
  applyFont('#yourElement', this.value);
});

5. Determine whether or not to not present font variants.

$('#myFontPicker').fontpicker({
  variants: false
});

6. Customize the system fonts you need to make use of. Setting the choice  false will disable system fonts.

$('#myFontPicker').fontpicker({
  localFonts: {// Default: web safe fonts
    "Arial": {
      "category": "sans-serif",
      "variants": "400,400i,600,600i"
    },
    "Courier New": {
      "category": "monospace",
      "variants": "400,400i,600,600i"
    },
    "Georgia": {
      "category": "serif",
      "variants": "400,400i,600,600i"
    },
    "Tahoma": {
      "category": "sans-serif",
      "variants": "400,400i,600,600i"
    },
    "Times New Roman": {
      "category": "serif",
      "variants": "400,400i,600,600i"
    },
    "Trebuchet MS": {
      "category": "sans-serif",
      "variants": "400,400i,600,600i"
    },
    "Verdana": {
      "category": "sans-serif",
      "variants": "400,400i,600,600i",
    }
  }
});

7. Add your individual customized fonts to the font picker. Specify the path to the font folder containing .woff information.

$('#myFontPicker').fontpicker({
  localFontsUrl: '/fonts/'
});

8. Determine the parent container the place the font picker popup is hooked up to.

$('#myFontPicker').fontpicker({
  parentElement: '#customContainer'
});

9. Determine whether or not to allow font lazy load.

$('#myFontPicker').fontpicker({
  lazyLoad: true
});

10. Determine what number of lately picked fonts to remember.

$('#myFontPicker').fontpicker({
  nrRecents: 5
});

11. Execute a callback when a font is chosen.

$('#myFontPicker').fontpicker({
  onSelect: function(e) {
    fontType: fontType,
    fontFamily: fontFamily,
    fontStyle: italic ? 'italic' : 'normal',
    fontWeight: weight,
    fontSpec: value
  }
});

12. Determine whether or not to show the clear button.

$('#myFontPicker').fontpicker({
  showClear: true
});

13. Set the language of the font picker. Available languages: ‘en’, ‘de’, ‘fr’, ‘es’, ‘nl’.

$('#myFontPicker').fontpicker({
  lang: 'en'
});

14. API strategies.

// set font: weight 800, italic
$('#myFontPicker').val('Open Sans:800i').trigger('change');

// show/hide the font picker
$('#myFontPicker').fontpicker('show');
$('#myFontPicker').fontpicker('hide');

// destroy the font picker
$('#myFontPicker').fontpicker('destroy');

Select/Preview Google/System/Custom Fonts, Fontpicker jQuery Plugin/Github

See Demo And Download