GOOGLE FONT API USAGE

PERSISTENCE REQUIRED

I’m working on a project to help web designers with their design/style guides for their web projects and part of that is the ability to specify which Google fonts they want to use for each project. As with most of Google’s services, there’s an API (application programming interface) for this very scenario. Because the documentation required some other context, I had to pull my solution from several sources.

This post will outline the steps (and code examples) needed to do the following:

1. Pull a list of fonts (by name) from the Google Fonts API
2. Display them as an autocomplete (type it and matching fonts show up as selectable options) on an input field displayed in a bootstrap modal dialog

Before we get to the steps needed, it’s best if you have the following already setup:

• Google Developer Account | This is free and can be tied to your GMail account if you have one or you can establish one just for this purpose. Go to https://developers.google.com/ to get started
• HTML Page with Form | This is a purely HTML/JavaScript/JQuery solution, no server-side code is needed and can be done on your local computer if desired. I’m using Bootstrap 3 and my form lives in a modal div, which required an extra step, but that’s not required and will work on a normal form too.
• Familiarity with JQuery and JQuery UI | The autocomplete for my project came from JQuery UI and the AJAX function to get the font data is JQuery’s getJSON. Since your solution isn’t going to be just like mine, you’ll need some skills to adapt it to your purposes.

STEP 1 | Get an API Key for Google Fonts. This is outlined here: https://developers.google.com/fonts/docs/developer_api#a_quick_example as well as a quick example of what the URL request string looks like. Once you have your API Key and have set the appropriate domain restrictions.

STEP 2 | Write some JavaScript code. Before you start commenting on how not efficient my code is, please note that I’m a lover (designer) not a coder. Just make it better for yourself as I care that it works.

//get Google fonts
var JSONItems = []; //array to hold the JSON data from Google Font API
var availFonts = []; //array to hold just the names of the fonts
//be sure to add your API key in here before running this code
$.getJSON( “https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY-HERE”, function( data){
//populate the array with the items array from Google’s response
JSONItems = data.items;
//iterate through the array and get only the font name from the collection and put it into the new array
for (k = 0; k < JSONItems.length; k++) {
//availableFonts += JSONItems[k].family;
availFonts.push(JSONItems[k].family);
}
//check to see that you got something – should be the font ABeeZee
console.log(availFonts[0]);
});

STEP 3 | Setup the autocomplete for your input field to use the array you just got from the API call.
Remember, you must include JQuery in the head section of your page.

//fontName is the ID of the input field I want to have the autocomplete on
$( “#fontName” ).autocomplete({
source: availFonts
});

STEP 4 (Optional) | Make sure the autocomplete results are displayed in the modal and not behind it.
Remember, you must include JQuery UI in the head section of your page.

//addFont is the ID of the form that contains the autocomplete input field
$( “#fontName” ).autocomplete( “option”, “appendTo”, “#addFont” );

Time to test it and see what you get. First, look for the first font name in the console log. If that doesn’t appear, fix that bit of code first.

Second, go to your form and start typing out a valid font name – like “Open Sans” and see if you get suggestions underneath your input field. If it doesn’t work, first thing to check is to makes you’ve include the JQuery Mobile script tag in your head. Once confirmed and it still doesn’t work, check that you’ve configured the right input ID/Class in the autocomplete configuration.

If you see the list build out behind your modal, you’ve not configured that last bit of code correctly – most likely not specifying the form ID/Class correctly.

Here’s a JSFiddle (add your own API Key): https://jsfiddle.net/manattweb/35ppypok/

And that’s it. I don’t know about you, but when I finally get something to work, I celebrate like it’s 1999. Let me know what you think.