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

File Size: 27.3 KB
Views Total: 2563
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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='//'></script>

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

<script src=''></script>
<link href='' 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.


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

$('#webfont').wfselect().on('wfselectchange', function (event, fontInfo){

7. Add more Google fonts to the dropdown selector.

  fonts: {
    google: {
      families: ["Droid Sans", "Signika"],
      url_generation: {base_url: '$font', space_char: '+'}
  load_all_fonts: true,
  default_font_name: {type: 'google', name: 'Signika'}

Change log:


  • 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"


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


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


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


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


  • 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.