Easy Google Font Selector With jQuery - Fontselect

File Size: 13.8 KB
Views Total: 25740
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Google Font Selector With jQuery - Fontselect

Fontselect is a jQuery plugin which allows you to select Google fonts with live preview from a dropdown list using Google Web Fonts API. You can apply the selected font as a font family to any CSS styles.

The successor version is now available here.

How to use it:

1. Include the stylesheet fontselect.css to style the font dropdown selector.

<link rel="stylesheet" href="fontselect.css">

2. Include the JavaScript file fontselect.js after you've included jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.fontselect.js"></script>

3. Create a text input for the font selector.

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

4. Call the function on the text input to initialize the plugin.


5. Apply the user selected font to a specified element (e.g. paragraphs).


    // replace + signs with spaces for css
    var font = $(this).val().replace(/\+/g, ' ');

    // split font into family and weight
    font = font.split(':');

    // set family on paragraphs
    $('p').css('font-family', font[0]);

6. Plugin's default options.

// CSS class for the font selector
style: 'font-select',

// placeholder for the font selector
placeholder: 'Select a font',

// number of fonts to try and preload ahead in the font selector
lookahead: 2,

// path to the Google Web Fonts API
api: '//fonts.googleapis.com/css?family='

7. Add/remove fonts.

  fonts: [
    "Carter One",
    "Lobster Two",
    "Miltonian Tattoo",
    "Modern Antiqua",
    "Mountains of Christmas",
    "PT+Serif Caption",
    "Varela Round",



  • v1.1.0: Moving fonts into an alterable option.


  • v1.0.5: Fix lookahead not respecting options passed in


  • v1.0.4


  • Change offset method for moveToSelected()


  • Don't use deprecated .context()

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