Quickly Generate Google Fonts Preview

Quickly Generate Google Fonts Preview

6 years ago
Anonymous $oIHRkISgaL

https://medium.com/@jmatix/quickly-generate-google-fonts-preview-954dc9974a62

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= if you have a Google API Key which can be obtained at: https://developers.google.com/fonts/docs/developer_api#a_quick_example .