Home Typography Automating @font-face kit generation from the console

Automating @font-face kit generation from the console

by admin

If you’ve ever wondered if there’s any way to automate font generation for the web, or if you’re tired of going to Font Squirrelevery time, then, as they say, welcome under the hood.
The other day I wrote a console utility, essentially a client, for the popular web font generator Font Squirrel I named it Marmot, and this is what it can do :

marmot Averia-Regular.ttf # ls . => webfontkit.zip

Marmot takes any font, uploads it to Font Squirrel and downloads an archive with woff, ttf, eot and svg versions of the font. The defaults are the standard generator settings.
In the archive that you download from Font Squirrel there is always a file called generator-config.txt , so Marmot can read it :

marmot -c generator-config.txt font.otf

Cool, cool, where do you download from, how do you set it up?

Marmot is written in ruby, put it like a regular jam :

gem install marmot

How do you set it up?

One of the options is to use config file, which I wrote about above. The format is JSON and they look like this :

{"formats":["ttf", "woff", "svg"], "fallback":"none", "subset_custom_range":"E000-F8FF", "emsquare":"1000"}

Second option, set parameters through the console :

marmot --no-add-hyphens --formats=ttf, woff font.otf

There are a lot of parameters, and their names are sometimes frankly incomprehensible, to make it easier, let’s go to generator page and in the console run this code :

$("input[value='expert'], input[value='advanced']").click();$("table input").each(function(){$(this).after($("<div style='color:red;'> "+$(this).attr("name")+" : "+$(this).attr("value")+"</div> "));});

This makes more sense :
Automating @font-face kit generation from the console

A picture of a trolleybus or why it’s needed

Actually, in most cases it’s probably easier to go to the generator page, generate the font you want once and put it in the project folder.

You’re a funny guy, why am I reading all this then?

I had to work with icon fonts the other day (which is a trendy topic right now, right?) and as new icons were added, I had to repeat that dull conversion procedure every time. To avoid that (and to save all of you from such torment), I wrote Marmot.
Now I just run a script, like this :

rm -r ./web/app/assets/fonts/iconsmarmot -dc ./web/config/font-config.json ./design/icons-Regular.otf output.zip unzip output.zip -d ./web/app/assets/fonts/icons

and all
My craft will come in handy for all those who sometimes want to automate this process, and for geeks like me who like to do everything from the console.
If anyone is interested, here is the code on githab : Github code
Peace be upon you all

You may also like