Getting the Most Out of Variable Fonts on Google Fonts

Recursive on Google Fonts: Pulling the Full Variable Range Out of the CSS API

Recursive Sans & Mono, the open-source variable font family from Arrow Type, has officially landed on Google Fonts. The visible catalog entry, however, only scratches the surface: the standard embed shows a handful of static styles plus a single Weight axis, while the actual family ships with 64 named instances and five variable axes spanning four subfamilies: Sans Linear, Sans Casual, Mono Linear, and Mono Casual.

Tapping into that full range is possible, but it requires moving past the default front end and composing requests against the Google Fonts CSS API (version 2) by hand. The basics of variable fonts and a few URL conventions make this fairly straightforward.

What a variable font file actually contains

Like an SVG, a variable font stores letterforms as vector outlines. Multiple "source locations" of those outlines act as keyframes; the font interpolates the control points between them to produce intermediate styles. Those deltas can add up quickly, and every axis typically increases the number of required drawings by a factor of two. The practical upside is file size: leaving out axes you don't need trims the font down in a way that mirrors cropping a photo or trimming a video clip.

That's why the Google Fonts CSS API asks you to opt into axes rather than serving a monolithic file. A subset WOFF2 covering Recursive's full wght range sits around 60 KB, versus roughly 25 KB for a single pinned style with the same character set. It's a tipping point worth remembering: at three weights, you're saving about 15 KB versus static files, and the full variable font at 281 KB beats 11 separate style files.

Axes, tags, and defaults

Variable axes are identified by four-letter tags. Lowercase tags are standard OpenType axes; uppercase tags denote custom, font-specific axes. The standard set is:

• wght — Weight
• wdth — Width
• opsz — Optical Size
• ital — Italic
• slnt — Slant

Recursive implements two standard axes plus three custom ones. Its default values for every axis:

• MONO — 0 (proportional Sans)
• CASL — 0 (Linear)
• wght — 400
• slnt — 0 (upright)
• CRSV — 0 (Roman, non-cursive lowercase)

The casual axis interpolates between a normal drawing and a brushier one at opposite extremes, giving the family its distinct "Casual" mode via vector control point shifts. Monospace and proportional variants occupy another axis, with the upright and slanted forms controlled by slnt and an alternate-glyph axis for cursive forms.

Ways to request fonts from the API

The API's family parameter accepts two distinct syntaxes. The first pins axes to specific non-default values, giving you an exact, discrete style:

// Sans Casual Regular:

https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap

// Sans Casual Regular and Bold:

https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap

The URLs map to CSS @import rules or <link> tags in the standard way, with the returned stylesheet producing the corresponding @font-face rules.

The second syntax trades specificity for flexibility by requesting a continuous range along one or more axes. Rather than a semicolon-separated list of values, ranges use a double dot (..), as in Recursive:[email protected]. Google Fonts replies with a single, optimised variable font serving the whole span.

Adding axes simply alphabetizes tags before the @ and pairs values or ranges in the same comma-separated order afterward:

https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap

The same rule applies to piling up multiple families into one request: additional family parameters are allowed, but families must be alphabetised, too.

<link href="https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet">

Serving CSS for flexible typography

Once an API call exposes axes, standard axes can be driven by existing CSS properties — a weight variable font responds to font-weight: 425;. Custom axes respond only to font-variation-settings, where pairing it with CSS custom properties eases inheritance pain:

body {
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

Getting the full variable family from the API results in a font that can be adjusted smoothly across weight, slant, mono, casual and cursive axes. Each additional axis, though, keeps adding weight to every font file served. Favour fewer axes when you can get away with them — an unused monolithic family costs bandwidth, while a future CSS change can add an axis back in with a URL tweak.

A couple of nuances to keep in mind

Google Fonts will serve a single variable font to optimise API requests even where axis ranges aren't requested. This is a font-display: swap world — the service decides on the best deliverable depending on the request and what a visitor's browser supports.

A quick check of the current API request returns files that work for any style inside the axis range that you request, not just the points you specify. If a request pins an axis to a specific value, the returned font won't include full flexibility along that axis.

For smaller designs, using a handful of explicit weights, for instance, returns a file tuned closer to the page's real needs, avoiding unnecessary axis range data. But for wide stylistic needs on a single page, one variable request can end up far smaller than laying down several dozen static variants.

Recursive also functions as a font for source code and remains free on GitHub. Its minisite takes the effort out of composing API calls if you want a quick tool for pinned styles and variable ranges.

Fraunces, Roboto Flex, or Science Gothic are worth watching as designs far beyond a single weight axis make it into the Google Fonts catalogue.