Wakamai Fondue on the command line: never write font CSS again!

February 11, 2021

Did you know? Wakamai Fondue is also command line tool! You can use it to generate all the CSS for all your fonts. No need to head over to the website, drag’n’drop your font, click the “Download stylesheet” button, save the file, and all that hassle. Just type wakamai-fondue -c MyFont.woff2 and the CSS will flood your terminal window! Bleep bloop!

Installing the fondue

Make sure you have npm running on your system. If you do any kind of modern browser computing, this is probably already the case. If not, head over here.

Install Wakamai Fondue from the terminal as follows:

$ npm -g install @wakamai-fondue/cli

This will make Wakamai Fondue globally available on your system!

Using the fondue

As a responsible citizen of cyberspace, you obviously want to take a minute and sit down comfortably to read the manual. This can be done with wakamai-fondue -h and it will tell you something like:

Usage: wakamai-fondue [options] <file>

Options:
  -V, --version  output the version number
  -c, --css      Generate CSS
  -j, --json     Dump info about font in JSON format
  -h, --help     display help for command

Great! With all this information injected into your brain hemispheres, it’s time to actually get some work done. Let’s feed it a font, for instance the variable font Recursive!

$ wakamai-fondue -c Recursive_VF_1.072.woff2

This will output all the CSS for your font directly to your terminal. If you’d rather save it to a file, you can do so by adding > filename.css:

$ wakamai-fondue -c Recursive_VF_1.072.woff2 > recursive.css

You will now have a file on your computer called recursive.css and it will contain all the CSS you need to use the OpenType layout features and variable instances of the Recursive font.

What’s in the CSS?

The CSS is the same as the Wakamai Fondue site will produce. This is because the CLI tool uses the same “engine”. The Wakamai Fondue Engine is powered by the awesome LibFont library, and provides some more human friendly data based on the raw font data.

So let’s look at recursive.css and quickly go through what CSS is generated for you. The idea is that you keep whatever you need, and throw away whatcha don’t.

First up is the @font-face rule:

/**
 * CSS for Recursive Sans Linear Light
 * Generated by Wakamai Fondue - https://wakamaifondue.com
 * by Roel Nieskens/PixelAmbacht - https://pixelambacht.nl
 */

@font-face {
    font-family: "Recursive Sans Linear Light";
    src: url("Recursive_VF_1.072.woff2");
    font-weight: 300 1000;
    unicode-range: U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192, U+019D,
        U+01A0-01A1, U+01AF-01B0, U+01C4-01CC, U+01E6-01E7, U+01EA-01EB,
        U+01F1-01F3, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259,
        U+0272, U+02B9-02BC, U+02BE-02BF, U+02C6-02CC, U+02D8-02DD,
        U+0300-0304, U+0306-030C, U+030F, U+0311-0312, U+0315, U+031B,
        U+0323-0328, U+032E, U+0331, U+0335, U+03C0, U+0E3F, U+1E08-1E09,
        U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25,
        U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49,
        U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B,
        U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EA0-1EF9,
        U+2007-200B, U+2010, U+2012-2015, U+2018-201A, U+201C-201E,
        U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+203E, U+2044,
        U+2052, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A6, U+20A8-20AD,
        U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+20BF, U+2113,
        U+2116, U+2122, U+2126, U+212E, U+2153-2154, U+215B-215E, U+2190-2199,
        U+2202, U+2205-2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
        U+222B, U+2248, U+2260-2261, U+2264-2265, U+25A0-25A1, U+25B2-25B3,
        U+25B6-25B7, U+25BC-25BD, U+25C0-25C1, U+25C6-25C7, U+25CA,
        U+2610-2611, U+2661, U+2665, U+2713, U+27E8-27E9, U+E132-E133, U+F8FF,
        U+FB01, U+FB03;
}

Make sure the src is correct. Wakamai Fondue currently doesn’t add the path, but there’s an issue for that.

You see that the font-weight range is set properly, so browsers will know how to use the variable weight axis and doesn’t go faux bold on you.

Next up is a massive unicode-range blob, matching exactly what the font supports. You can remove codes if you want a fallback font to take care of those characters, for instance because it has a more beautiful ampersand, or the preferred design for a specific language. Or you can safely remove this entire thing if you don’t have a need for it.

Now, on to the OpenType features. This uses the patented Wakamai Fondue Inheritance Problem Fixing Method™. That’s quite a mouthful, so you can just say “WFIPFM™” in casual conversation (the ™ is silent).

First we set CSS variables for all of Recursive’s features:

/* Set custom properties for each layout feature */
:root {
    --recursive-sans-linear-light-aalt: "aalt" off;
    --recursive-sans-linear-light-afrc: "afrc" off;
    --recursive-sans-linear-light-case: "case" off;
    --recursive-sans-linear-light-dlig: "dlig" off;
    --recursive-sans-linear-light-dnom: "dnom" off;
    --recursive-sans-linear-light-frac: "frac" off;
    --recursive-sans-linear-light-numr: "numr" off;
    --recursive-sans-linear-light-ordn: "ordn" off;
    --recursive-sans-linear-light-pnum: "pnum" off;
    --recursive-sans-linear-light-sinf: "sinf" off;
    --recursive-sans-linear-light-ss01: "ss01" off;
    --recursive-sans-linear-light-ss02: "ss02" off;
    --recursive-sans-linear-light-ss03: "ss03" off;
    --recursive-sans-linear-light-ss04: "ss04" off;
    --recursive-sans-linear-light-ss05: "ss05" off;
    --recursive-sans-linear-light-ss06: "ss06" off;
    --recursive-sans-linear-light-ss07: "ss07" off;
    --recursive-sans-linear-light-ss08: "ss08" off;
    --recursive-sans-linear-light-ss09: "ss09" off;
    --recursive-sans-linear-light-ss10: "ss10" off;
    --recursive-sans-linear-light-ss11: "ss11" off;
    --recursive-sans-linear-light-ss12: "ss12" off;
    --recursive-sans-linear-light-ss20: "ss20" off;
    --recursive-sans-linear-light-sups: "sups" off;
    --recursive-sans-linear-light-titl: "titl" off;
    --recursive-sans-linear-light-zero: "zero" off;
}

And then provide CSS to turn each feature on. For some features, we prefer the more modern CSS in an @supports rule. Here’s the (snipped) code:

/* If class is applied, update custom property and
   apply modern font-variant-* when supported */
.recursive-sans-linear-light-aalt {
    --recursive-sans-linear-light-aalt: "aalt" on;
}

.recursive-sans-linear-light-afrc {
    --recursive-sans-linear-light-afrc: "afrc" on;
}

@supports (font-variant-numeric: stacked-fractions) {
    .recursive-sans-linear-light-afrc {
        --recursive-sans-linear-light-afrc: "____";
        font-variant-numeric: stacked-fractions;
    }
}

.recursive-sans-linear-light-case {
    --recursive-sans-linear-light-case: "case" on;
}

.recursive-sans-linear-light-dlig {
    --recursive-sans-linear-light-dlig: "dlig" on;
}

/* ...snip... */

.recursive-sans-linear-light-zero {
    --recursive-sans-linear-light-zero: "zero" on;
}

@supports (font-variant-numeric: slashed-zero) {
    .recursive-sans-linear-light-zero {
        --recursive-sans-linear-light-zero: "____";
        font-variant-numeric: slashed-zero;
    }
}

Finally, there’s some CSS to actually apply the requested features without losing any previously set features. Thanks, WFIPFM™!

/* Apply current state of all custom properties
   whenever a class is being applied */
.recursive-sans-linear-light-aalt,
.recursive-sans-linear-light-afrc,
.recursive-sans-linear-light-case,
.recursive-sans-linear-light-dlig,
.recursive-sans-linear-light-dnom,
.recursive-sans-linear-light-frac,
.recursive-sans-linear-light-numr,
.recursive-sans-linear-light-ordn,
.recursive-sans-linear-light-pnum,
.recursive-sans-linear-light-sinf,
.recursive-sans-linear-light-ss01,
.recursive-sans-linear-light-ss02,
.recursive-sans-linear-light-ss03,
.recursive-sans-linear-light-ss04,
.recursive-sans-linear-light-ss05,
.recursive-sans-linear-light-ss06,
.recursive-sans-linear-light-ss07,
.recursive-sans-linear-light-ss08,
.recursive-sans-linear-light-ss09,
.recursive-sans-linear-light-ss10,
.recursive-sans-linear-light-ss11,
.recursive-sans-linear-light-ss12,
.recursive-sans-linear-light-ss20,
.recursive-sans-linear-light-sups,
.recursive-sans-linear-light-titl,
.recursive-sans-linear-light-zero {
    font-feature-settings: var(--recursive-sans-linear-light-aalt), var(--recursive-sans-linear-light-afrc),
        var(--recursive-sans-linear-light-case), var(--recursive-sans-linear-light-dlig), var(--recursive-sans-linear-light-dnom),
        var(--recursive-sans-linear-light-frac), var(--recursive-sans-linear-light-numr), var(--recursive-sans-linear-light-ordn),
        var(--recursive-sans-linear-light-pnum), var(--recursive-sans-linear-light-sinf), var(--recursive-sans-linear-light-ss01),
        var(--recursive-sans-linear-light-ss02), var(--recursive-sans-linear-light-ss03), var(--recursive-sans-linear-light-ss04),
        var(--recursive-sans-linear-light-ss05), var(--recursive-sans-linear-light-ss06), var(--recursive-sans-linear-light-ss07),
        var(--recursive-sans-linear-light-ss08), var(--recursive-sans-linear-light-ss09), var(--recursive-sans-linear-light-ss10),
        var(--recursive-sans-linear-light-ss11), var(--recursive-sans-linear-light-ss12), var(--recursive-sans-linear-light-ss20),
        var(--recursive-sans-linear-light-sups), var(--recursive-sans-linear-light-titl), var(--recursive-sans-linear-light-zero);
}

Wakamai Fondue currently generates CSS for all the named instances in the font. This way you can use classes to get the instance you want!

/* Variable instances */
.recursive-sans-linear-light-mono-linear-light {
    font-variation-settings: "MONO" 1, "CASL" 0, "wght" 300, "slnt" 0,
        "CRSV" 0.501;
}

.recursive-sans-linear-light-mono-linear-light-italic {
    font-variation-settings: "MONO" 1, "CASL" 0, "wght" 300, "slnt" -15,
        "CRSV" 1;
}

.recursive-sans-linear-light-mono-casual-light {
    font-variation-settings: "MONO" 1, "CASL" 1, "wght" 300, "slnt" 0,
        "CRSV" 0.501;
}

.recursive-sans-linear-light-mono-casual-light-italic {
    font-variation-settings: "MONO" 1, "CASL" 1, "wght" 300, "slnt" -15,
        "CRSV" 1;
}

/* ...snip... */

.recursive-sans-linear-light-sans-linear-extrablack-italic {
    font-variation-settings: "MONO" 0, "CASL" 0, "wght" 1000, "slnt" -15,
        "CRSV" 1;
}

.recursive-sans-linear-light-sans-casual-extrablack {
    font-variation-settings: "MONO" 0, "CASL" 1, "wght" 1000, "slnt" 0,
        "CRSV" 0.501;
}

.recursive-sans-linear-light-sans-casual-extrablack-italic {
    font-variation-settings: "MONO" 0, "CASL" 1, "wght" 1000, "slnt" -15,
        "CRSV" 1;
}

Never write a single byte of font CSS yourself!

Never say never, they say. But I hope you will put the Wakamai Fondue command line robot to work, and just have it do your work for you.

The Wakamai Fondue engine will be expanded and improved over the coming months, adding support for controlling individual axes (as opposed to “just” using named instances), more modern CSS @supports rules, and new modern high tech CSS for upcoming features, like the font metrics override descriptors.

Find more information on the NPM page or the Github repos. That’s where we work on Wakamai Fondue. Special shout out to fellow Kabisian Pascal Widdershoven for his amazing JavaScript wrangling skills and creating this CLI tool for all of us to use!

And if the command line isn’t your thing, just head to the Wakamai Fondue (beta) and use the fondue from the leisure of your browser window!