DEV Community

loading...

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

ycmjason profile image Jason Yu ・2 min read

Background

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

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!

image.png

Discussion (15)

pic
Editor guide
Collapse
jonasws profile image
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!

Collapse
ycmjason profile image
Jason Yu Author

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.

Collapse
d0ruk profile image
Doruk Kutlu

With jq;

curl -s "https://www.googleapis.com/webfonts/v1/webfonts?key=$GOOGLE_API_KEY&sort=alpha" | jq -r '.items[].family'
Collapse
jonasws profile image
Jonas Strømsodd

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

Thread Thread
ycmjason profile image
Jason Yu Author • Edited

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.

Thread Thread
jonasws profile image
Jonas Strømsodd • Edited

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!

Thread Thread
ycmjason profile image
Jason Yu Author

Stay tuned. I will make one. :P

Thread Thread
ycmjason profile image
Jason Yu Author

looks like something similar exists.

npmjs.com/package/json

Thread Thread
jonasws profile image
Jonas Strømsodd

Nice, I will have to check it out!

Collapse
iridakos profile image
Collapse
pichord profile image
π • Edited

(including my own star).

is so honest xD
Great post!

Collapse
ycmjason profile image
Jason Yu Author

Hahahaa.. thanks!! XD

Collapse
teslafreak profile image
Chris A.

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

Collapse
ycmjason profile image
Jason Yu Author

I am just running it once in a while.

Collapse
arhsim profile image
arhsim

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