Google Webfonts chooser and embedder widget for Javascript

Question

Does there already exist a widget which would allow the user to pick his/her choice from one of Google Webfonts fonts and you could embed this widget to your own web application?

http://www.google.com/webfonts

Some kind of advanced Font picker dialog with robust search and preview functionality, allowing dynamically to load Google Webfonts.

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

Langtry

See this answer: #13757696 – Need

Answer 1

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.

Prue

Great, thanks Peter! I tested the demo on FF and could not get it working, but this is probably enough to built my own selector. – Langtry

@MikkoOhtamaa you probably need to add your api key (the public api is rate limited). in javascript/jquery.gwfselect.js change line 6 from var fontURL = 'googleapis.com/webfonts/v1/webfonts', to var fontURL = 'googleapis.com/webfonts/v1/webfonts?key=<YOUR API KEY FROM code.google.com/apis/console >', – Prue

Answer 2

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

Parable

Demo doesn't seem to work but I downloaded it from GitHub and it's a pretty little tool. It's just like Hodor - it has only one job and does it properly. Thank you Saadi! – Thorvaldsen

@Thorvaldsen Thank you. I have updated the demo link as well. – Parable

Answer 3

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.

Catnip