Variable fonts

Ships each font as one file covering every weight the player asks for.

The Listen page: the library, nine albums as drawn record covers — The EB Garamond heading and Inter labels of the library, each family one file.

How Riff uses it

Each bundled font is a single variable woff2 with a weight range in its @font-face. Roboto covers 100 to 900 for the player, Inter and EB Garamond 400 to 700 for the Listen app. The stylesheet asks for four weights, and all of them come from the one file.

Why

The fonts ship with the plugin rather than from Google, so a listener's address never leaves the site, and one file per family keeps that to three requests.

Without it

The stacks name the system fonts next, and font-display: swap shows them until the file arrives.

Where

plugins/riff/assets/riff.css, line 9
```
@font-face {
```
plugins/riff/assets/riff.css, line 12
```
font-weight: 100 900;
```

Links open the source at the commit this page was published from.

Reference: Variable fonts on MDN.