https://github.com/seanvm/fontselect-jquery-plugin

A font selector for the Google Web Fonts api
https://github.com/seanvm/fontselect-jquery-plugin

font-selector fontselect-jquery-plugin google-fonts jquery

Last synced: 2 months ago
JSON representation

A font selector for the Google Web Fonts api

• Host: GitHub
• URL: https://github.com/seanvm/fontselect-jquery-plugin
• Owner: seanvm
• Created: 2017-10-07T07:36:57.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-02-16T04:47:56.000Z (almost 4 years ago)
• Last Synced: 2024-09-19T01:12:30.033Z (4 months ago)
• Topics: font-selector, fontselect-jquery-plugin, google-fonts, jquery
• Language: JavaScript
• Homepage:
• Size: 34.2 KB
• Stars: 18
• Watchers: 4
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fontselect jQuery Plugin

A font selector to choose from fonts available as part of the Google Web Fonts api. 

Let users easily select and preview a font from Google's large range of free fonts.

# [Demo](https://seanvm.github.io/fontselect-jquery-plugin/)

## Documentation

To create a font selector simply run the plugin on a standard html input element.

### How to use

    $('input.fonts').fontselect();

### Options

Fontselect has one argument, an options object that you might want to customise:

* style: the class to give the new font selector

* placeholder: text to use when no font is selected yet

* lookahead: a number of fonts to try and preload ahead in the select box

* fonts: an array of fonts to display instead of the defaults.

      $('input.fonts').fontselect({

          style: 'font-select',

          placeholder: 'Select a font',

          lookahead: 2,

          fonts: ["Aclonica","Amaranth","Bevan","Zeyada"]

        });

### Events

Fontselect triggers the change event on the original element when a font is selected. 

An example is included to show how this could be used to update the font on the current page.

    $('input.fonts').fontselect().change(function(){

    

      // replace + signs with spaces for css

      var font = $(this).val().replace(/\+/g, ' ');

      

      // log font name

      console.log(font);

    });

## License / Credits

This is a continuation of the now-unmaintained [Fontselect jQuery plugin](https://github.com/tommoor/fontselect-jquery-plugin) by [Tom Moor](https://github.com/tommoor).

This plugin is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with the code.

[More Information](http://en.wikipedia.org/wiki/MIT_License)

## Download

Releases are available for download from

[GitHub](https://github.com/seanvm/fontselect-jquery-plugin/releases).

Alternatively, you can download and install via NPM

`npm i fontselect-jquery-plugin` - https://www.npmjs.com/package/fontselect-jquery-plugin