Quickly Generate Google Fonts Preview

So many fonts out there… How to preview and pick what I want?

As of this writing, there are 878 Google Fonts. Google provides a preview page for these fonts on the Google Fonts website. But I am sure many of you like me wish if there existed a simpler way to preview these fonts and select what suits your need. Here I am going to show you how to generate a preview of the Google Fonts on a single web page using a bit of JavaScript.

To generate a preview we need a list of all the fonts in a structured data format. Fortunately I could find a list in JSON format curated by Jonathan Neal under his GitHub project Google Fonts Complete. We are going to use the JSON data available at the URL: https://raw.githubusercontent.com/jonathantneal/google-fonts-complete/master/google-fonts.json. I found the list pretty up to date. In case you want the most up to date feed, you can directly get it from Google at https://www.googleapis.com/webfonts/v1/webfonts?key=<Your API Key> if you have a Google API Key which can be obtained at: https://developers.google.com/fonts/docs/developer_api#a_quick_example .

Each font in the JSON data from Jonathan Neal’s GitHub project has a structure similar to:

"ABeeZee": {
 "category": "sans-serif",
 "lastModified": "2017-10-10",
 "subsets": […