DEV Community 👩‍💻👨‍💻

Jason Yu
Jason Yu

Posted on

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.

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

Top comments (15)

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 on

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 on

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
Lazarus Lazaridis

Awesome!

Collapse
 
pichord profile image
π • Edited on

(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.

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.