Fonts

Fonts come from Google Fonts, are previewed before you commit to one, and are collected into the project as real files when you do.

System → Fonts → Browse Google Fonts…

Choosing

Every family in the list is set in its own face, because that is the only useful thing a list of fonts can tell you. Search by name, or filter by Sans Serif, Serif, Display, Handwriting and Monospace.

Nothing is downloaded while you browse. The previews come from Google’s CDN, and forty at a time so that scrolling is one request rather than forty.

Collecting

Collect downloads the actual font files into assets/fonts/ and writes the @font-face into the FONTS section of globals.css, with a project-relative path. That is the same block FEWD Studio, Bricks and gencss-wp already read, so the developer gets the font with no further work.

Collect the font before handing anything over. A project that names a font it does not have looks right on your machine and breaks on everybody else’s, and a single-file export cannot inline a file that is not there.

Variable where it is offered

Most families now ship variable — one file covering every weight from 100 to 900 rather than nine separate cuts. It is fewer bytes, and it means weight is a range you can sweep rather than a set of steps somebody happened to download.

Families that are not variable get their regular and bold.

What you get

Latin and Latin Extended. A font is sliced per language, and a family at two weights is fourteen of those slices — the rest are Cyrillic, Greek and Vietnamese, and collecting them by default would quadruple the download for characters the page will never ask for.

The files are woff2, which is what Google serves to a modern browser. There is no conversion step and nothing to run afterwards.

Licences

Nothing here costs anything. Every family in the catalogue is open source — the overwhelming majority under the SIL Open Font License, a few under Apache 2.0 or the Ubuntu Font Licence. Free to use commercially, free to embed, free to pass on.

Collect brings the licence with the files: the family’s own OFL.txt, which carries its copyright line as well as the licence text, plus a README.md in assets/fonts/ listing what is there, who made it and which licence it is under.

That is the one thing the licence asks. Handing over a folder of font files is redistribution, and redistribution means keeping the text alongside them. There is nothing to display on the site, nothing to credit, and nothing to register.

Two clauses that are unlikely to affect you: you cannot sell the font files on their own — selling a site that uses them is fine — and if you modify a font you cannot keep its reserved name.

Using one

After collecting, Use for → Body / Display / Mono sets it as that role in the design system, spelled to match the @font-face exactly and with a fallback after it. Everything downstream reads those roles, so the whole design moves.

The catalogue

It is fetched once and cached for a week. If Google cannot be reached the cached list is used and the panel says so — a week-old list of families is a working font picker, and no list is a dead panel.