Easy embedding of Google web fonts

I’m working on a new splash/intro section to embed in Marked 2. It’s coming along nicely, and in addition to offering a “Getting started” series of slides, it can set groups of configuration options with a single button. Now that Marked has attempted to satisfy so many different writing workflows, it’s become overloaded with options (i.e. “bloated”). This simplifies things greatly (details:¹).

When I’m working on HTML interfaces to embed in apps (or designing themes for Marked), I usually like to embed any web fonts I use as data URIs. In cases like an app’s splash page, this ensures it won’t load looking awful because the user didn’t have an internet connection to download remotely-hosted fonts when they launched.

Google hosts a selection of free web fonts, and there are some pretty good ones in there. Amongst some awful ones, but it’s easy to search. To embed these, though, you have to take the code Google gives you, follow the import url to the CSS page, grab the source url for each font/variation, save the target file locally, then base64 encode the font to use in a data URI. The source for all of these is available from Google Code, but the process is just as tedious going that route. I do this just often enough that it had to be automated.

The script is simple and serves only this purpose. You just copy one or more <link> lines from the “Standard” tab of the Quick Use panel on the Google Web Fonts page. Pass them to the script on STDIN and it will do the rest, outputting ready-to-paste CSS with the base64 URIs within a full font-face declaration for each font.

Grab the script, save it to a file in your path (/usr/local/bin/font_grabber.rb works), and then run chmod a+x [path/to/file] to make it executable.

The lines you need to input look like this:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>

It looks for an exact match without much forgiveness, so make sure that you have the full markup in the input.

The easiest way to run the script is to copy a line like the above (or multiple, one per line) to the clipboard and run this in Terminal:

pbpaste | font_grabber.rb | pbcopy

That will put the result directly back onto your clipboard. You can also redirect it to a file, if needed, with:

pbpaste | font_grabber.rb > tempfonts.css

You can also save the link lines to a file and cat it into the pipe, or pass each link as an argument on the command line, quoted with double quotes. I don’t recommend the latter, too messy.

Using the link shown above, that will output CSS like this:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src:url("data:font/ttf;base64,AAEAAAASAQA[...]") format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src:url("data:font/ttf;base64,AAEAAAASAQA[...]") format('truetype');
}

Put that into your main CSS and you can use font-family: 'Open Sans' freely with no additional import statements. Note that this increases your CSS size significantly enough to offset any load time gains from reducing external requests, so in most cases it’s not an optimization. It just ensures that the fonts will be available offline.

Here’s the link to the script again, in case you missed it.