Select/Preview Google/System/Custom Fonts With Fontpicker Plugin

Select/Preview Google/System/Custom Fonts With Fontpicker Plugin
File Size: 122 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Fontpicker.js the successor of the Fontselect plugin that converts an input field into a full-featured font picker for Google Web Fonts and System/Custom Local fonts.

More Features:

  • Provides a convenient popup interface to select fonts.
  • Live preview after selected.
  • Lazy load fonts to improve performance.
  • Allows to set favorite colors.
  • Easy to filter through fonts with a search box or tags (serif, sans serif, display, etc).
  • Supports font weight and font style.
  • Keyboard interactions. Keys 1-9 select a font weight in an active item. Key i toggles italics in an active item.
  • Auto remembers the last picked fonts.
  • Multiple languages: English, German, Dutch.
  • Useful API methods and event handlers.

How to use it:

1. Load the stylesheet jquery.fontpicker.css and JavaScript jquery.fontpicker.js in 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 normal input field for the font picker.

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

3. Just call the function fontpicker on the input field and the plugin will take care of the rest.

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

4. Apply the selected font family to a given element using the change event.

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 show show font variants. Default: true.

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

6. Customize the system fonts you'd like to use. Setting the option to 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 own custom fonts to the font picker. Specify the path to the font folder containing .woff files.

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

8. Determine the parent container where the font picker popup is attached to. Default: 'body'.

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

9. Determine whether or not to enable font lazy load. Default: true.

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

10. Determine how many recently picked fonts to remember (shown in 'Favorite fonts' section). Default: 3.

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

11. API methods.

// 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');

Changelog:

v0.8 (2020-03-12)

  • Fixed: If the input element had a value of a non-existing font family, a Javascript error would be thrown.

v0.7 (2020-03-04)

  • Modal can now be opened by spacebar, when element is focused.
  • Keys 1-9 select a font weight in an active item. 1 = font-weight 100 ... 4 = font-weight 400 ... 9 = font-weight 900.
  • Key i toggles italics in an active item.
  • Italic pill now has a purplish colored background

v0.6 (2020-03-03)

  • The fontpicker now lists the last X fonts a user picked in the Favorite fonts section.
  • The new nrRecents option controls how many last-picked fonts are remembered.
  • Added a clear button to the search box.

v0.5 (2020-02-28)

  • Favorite fonts weren't rendered in their respective font families when lazy loading was enabled

This awesome jQuery plugin is developed by av01d. For more Advanced Usages, please check the demo page or visit the official website.