@wandelbots/fonts

Self-hosted web fonts for Wandelbots Nova, shipped as WOFF2 with ready-to-import @font-face CSS. Framework-agnostic — the same import works in Vite, webpack and Turbopack.

Which font, when

Inter is the typeface for everything: headlines, paragraph text and UI. It ships as a variable font, so one file per style covers the full 100–900 weight axis.

You rarely reference the family name directly — use the font-family tokens from @wandelbots/design-tokens:

• --wb-font-family-body / FontFamilyBody → "Inter", …
• --wb-font-family-mono / FontFamilyMono → system monospace stack

@wandelbots/mui already wires these into the theme.

Why no Wandelbots brand font?

The Wandelbots brand typeface is a presentational face — made for marketing, keynotes and print, not for product UI. Shipping it here would push it into every app that imports this package, so it stays out. An app that genuinely needs it (a landing page, a demo splash screen) can always bring the face itself and declare its own @font-face.

Usage

Import the stylesheet once, as early as possible in your entry point:

import "@wandelbots/fonts/css"
import "@wandelbots/design-tokens/css"

Next.js App Router — put it in the root layout:

// app/layout.tsx
import "@wandelbots/fonts/css"
import "@wandelbots/design-tokens/css"

Then reference the tokens rather than the family names:

body { font-family: var(--wb-font-family-body); }

Raw files

The WOFF2 files are exposed for <link rel="preload"> or next/font/local:

import { fontFiles } from "@wandelbots/fonts"
// fontFiles[0].file === "inter-variable-latin-ext.woff2"
//   → "@wandelbots/fonts/files/inter-variable-latin-ext.woff2"

Notes

• Every family is subset per character set and declared with a unicode-range, so a page in English or German downloads the ~103 KB latin slice and nothing else. latin-ext (Central/Eastern European) and the italic slices are fetched only when text actually needs them. Scripts outside Latin — Cyrillic, Greek, CJK — fall back to the system stack; add a subset to src/index.ts if an app needs one.
• All faces use font-display: swap, so text paints immediately in a fallback and swaps when the webfont arrives.
• Declaring a face costs nothing until it is used: browsers only download a font file when text actually matches it. Importing the combined css entry does not pull the italic files unless something renders italic.
• Inter ships as a single variable file per style, so every weight from 100 to 900 comes out of one download. OpenType features survive subsetting — font-variant-numeric: tabular-nums and the stylistic sets still work.

Development

pnpm --filter @wandelbots/fonts build   # TTF → subset WOFF2 + @font-face CSS + JS metadata
pnpm --filter @wandelbots/fonts test

To add or replace a face:

1. Drop the TTF into src/raw/.
2. Add an entry to fontFaces in src/index.ts.
3. Run pnpm build, commit the regenerated dist/.
4. Commit with feat(fonts): ….

Licensing

See LICENSE.md. Inter is licensed under the SIL Open Font License 1.1.