Here is a little script to grab a list of all font names on Google Fonts.

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

Jason Yu

#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!

Comments

[arhsim]

Terrific! I love the brevity. Need to brush up on my sed and awk skills.

[Chris A.]

Are you running this once and saving the list to your app or are you running it every init?

[YCM Jason]

I am just running it once in a while.

[Lazarus Lazaridis]

Awesome!

[Jonas Strømsodd]

Cool script!

If you haven't already, you would probably benefit a lot from a tool like jq, which will give you superpowers in this context!

[YCM Jason]

Ya, but I guess some how want to run this script every time I deploy the site. So I didn't want to bother installing jq on the production and staging servers. So I decided to go for a more primitive way.

[Doruk Kutlu]

With jq;

curl -s "https://www.googleapis.com/webfonts/v1/webfonts?key=$GOOGLE_API_KEY&sort=alpha" | jq -r '.items[].family'

[Jonas Strømsodd]

That makes sense. I wouldn't want to necessarily install jq for such a simple task, either.

[YCM Jason]

Hmm, I haven't look into jq yet, but I don't feel that jq is very easy to use from what I have scanned through.

Maybe I will start another project that makes json manipulation easier for people who are familiar with Javascript. Something like this is in my mind:

echo something.json | jsonpipe 'it.map(obj => obj.value).filter(v => v > 30)'

This would be much more easier for people who are familiar with Javascript already.

[Jonas Strømsodd]

I guess jq has a bit of a learning curve. Something like awk, but with JavaScript syntax, I think could be useful to many JavaScript developers!

[YCM Jason]

Stay tuned. I will make one. :P

[YCM Jason]

looks like something similar exists.

npmjs.com/package/json

[Jonas Strømsodd]

Nice, I will have to check it out!

[π]

(including my own star).

is so honest xD
Great post!

[YCM Jason]

Hahahaa.. thanks!! XD