Background

So if you have already read my previous post about faviator, you might have visited the faviator playground.

Introducing Faviator: A simple easy favicon generator

YCM Jason ・ Feb 22 '18

#favicon #showdev #opensource #npm

I am very grateful to have received 19 stars (including my own star) on GitHub last week. My first goal for this project is to collect 100 stars, so please be generous.

This week has been very exciting, I have got a few issues raised on github which implies that somebody is actually using faviator! Yay!

I heard some feedback regarding the faviator playground. One of which suggests to provide a dropdown to make font style selecting easier.

So I decided to work on this one first.

Exploring Google Font API

The Google Font API is a very simple API. The API has only one endpoint which returns all font information given your API key.

https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

You can generate your own API key here. The endpoint above return something like the following.

{
  "kind": "webfonts#webfontList",
  "items": [
    {
      "kind": "webfonts#webfont",
      "family": "ABeeZee",
      "category": "sans-serif",
      "variants": [
        "regular",
        "italic"
      ],
      "subsets": [
        "latin"
      ],
      "version": "v11",
      "lastModified": "2017-10-10",
      "files": {
        "regular": "http://fonts.gstatic.com/s/abeezee/v11/mE5BOuZKGln_Ex0uYKpIaw.ttf",
        "italic": "http://fonts.gstatic.com/s/abeezee/v11/kpplLynmYgP0YtlJA3atRw.ttf"
      }
    },
    ...
  ]
}

Nice! So we somewhat have all the family names, but I don't want to serve such a large file to my frontend just for the names. So I started writing a script to grab all the font names.

The bash script

grepFonts.bash

#!/usr/bin/env bash
KEY=$1

echo '['

curl -s "https://www.googleapis.com/webfonts/v1/webfonts?key=$KEY&sort=alpha" | \
  sed -n 's/ *"family": "\(.*\)",/  "\1",/p' | \
  sed '$s/\(.*\),/\1/'

echo ']'

Usage:

> bash grepFonts.bash YOUR-API-KEY
[
  "ABeeZee",
  "Abel",
  "Abhaya Libre",
  "Abril Fatface",
  "Aclonica",
  "Acme",
  ...
  "Zeyada",
  "Zilla Slab",
  "Zilla Slab Highlight"
]

And here we go, no more frustration when selecting text on faviator playground!