Google Web Font Picker Plugin With jQuery And jQuery UI - Webfont selector

A jQuery / jQuery UI based web font picker that allows the user to choose a Google web font from a dropdown font selector. The support of custom font family is coming soon.

How to use it:

1. Load the needed jQuery and jQuery UI in the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/path/to/jquery-ui.css">

2. Load the Google WebFont loader if you want to use Google fonts.

<script src='//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'></script>

3. Load the jQuery Webfont Selector plugin's files in the webpage.

<script src='webfont.select.js'></script>
<link href='webfont.select.css' rel='stylesheet'>

4. Create a normal input field for the font picker.

<input id='webfont'>

5. Run the plugin on the input field and done.

$('#webfont').wfselect();

6. Apply the user selected font family to a specific element using the wfselectchange event.

$('#webfont').wfselect().on('wfselectchange', function (event, fontInfo){
  $('p').css(fontInfo);
});

7. Add more Google fonts to the dropdown selector.

$('#webfont').wfselect({
  fonts: {
    google: {
      families: ["Droid Sans", "Signika"],
      url_generation: {base_url: 'https://fonts.googleapis.com/css?family=$font', space_char: '+'}
    }
  },
  load_all_fonts: true,
  default_font_name: {type: 'google', name: 'Signika'}
})

Change log:

2016-11-09

• Implemented default_font_name option to generate url when unknown font is typed
• Updated trigger to work via bind and include same payload data as "change"

2016-11-08

• Moved trigger to end of select font call so element is fully updated before triggering callback

2016-11-04

• Added timeout to all fonts load to help break up large font load-ins

2016-11-02

• Fixed load bug when pre-loading large font list, fixed bug with downloading already downloaded fonts

2016-11-01

• Fixed issue with font generation when font had 3+ words

2016-10-27

• Added URL generation in config, and support for per font url object

 

---

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