Google Webfonts chooser and embedder widget for Javascript

We have created a Google font picker.

It doesn't load all the fonts as you scroll. It only loads the fonts that are clicked. For font preview , we are using a single image which loads very fast . It has 700+ fonts

Download it from github

See demo here


i've found one project: https://github.com/agoragames/GWFSelect-for-jQuery-UI

a few drawbacks i noticed:

  • fouc as you scroll through the list of typefaces
  • seems to download the entire typeface rather than the needed characters
  • depends on jQuery UI

a nice project though and might do the job. note that if you are trying to use it you will probably need to use your own api key. you can get one from google.

Does Google Webfonts expose the necessary listing and metadata to build such widget if one doesn't exist yet?

they have an api which you can use to build such a widget: https://developers.google.com/webfonts/docs/developer_api

i imagine google docs uses this api for their amazing font chooser.


Take a look at Bootstrap Form Helpers: http://bootstrapformhelpers.com/googlefont/

They provide a really nice Google Web Fonts chooser without the drawbacks mentioned for GWFSelect-for-jQuery-UI because they use a prerendered preview image and an exported font list for the select box.