@humanforest/fonts

Brand fonts for Forest: GT Haptik (body/UI), Mohr (display), JetBrains Mono (code). This package is on public npm and is CSS-only: it ships only forest-fonts.cdn.css, never the files/* woff/woff2 themselves and never the other generated stylesheets (those are repo-internal, see below). The Mohr licence limits redistribution of the actual font files, so those stay out of the published tarball; they are consumed internally as a build source (e.g. by the private Nuxt layer, which bundles them directly — see packages/nuxt-layer/README.md).

Licence, in short:

• GT Haptik — unrestricted (body/labels/UI).
• Mohr — used only Black + UPPERCASE. MohrAlt (upright) web only; Mohr-BlackIt (italic) mobile/core. Do not redistribute the files without written rights.
• JetBrains Mono — OFL, free to redistribute.

Three stylesheet builds (from the same files/*.woff2)

bun run build:fonts (→ scripts/fonts.ts) emits, alongside the hand-kept relative one. Only forest-fonts.cdn.css ships in the published package — the other two are repo-internal (used by the docs app and the artifact kit respectively, never installed by a consumer). All three:

| File | @font-face src | Use | Published? | |---|---|---|---| | forest-fonts.css | url('./files/…') relative | self-hosting via a bundler (docs, real apps) | no — repo-internal | | forest-fonts.cdn.css | absolute CDN urls | runnable pages — fonts stay on the CDN | yes |

CDN base is FOREST_FONT_CDN (default https://assets.forest.bike/fonts; assets.forest.me serves the same bucket). The bucket has an R2 CORS policy returning Access-Control-Allow-Origin: *, which is what makes cross-origin @font-face work — verified by loading all three families cross-origin from a different host. Without it the file still returns 200 but the browser rejects it and silently paints the fallback, so if fonts ever go missing, check the CORS header before anything else:

curl -sI -H "Origin: https://example.com" https://assets.forest.bike/fonts/GTHaptik-Bold.woff2 | grep -i access-control

Because the responses carry Vary: Origin, each origin is cached separately — a request made before a CORS change keeps its header-less cached copy until it expires or is purged.

If you have installed the package

One line in your entry CSS — the stylesheet comes from npm, the font binaries from the CDN:

@import "@humanforest/fonts/forest-fonts.cdn.css";

This is the companion to the public npm packages: @humanforest/ui and friends ship no font files (the licence forbids redistributing Mohr publicly), so the fonts arrive over the CDN instead.

Using the fonts in a Nuxt project without this package

You don't need @humanforest/fonts installed. Two options.

Option A — load from the CDN (recommended, EULA-clean)

Fonts live on the CDN and are never copied into your repo. In nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: 'https://assets.forest.bike/fonts/forest-fonts.cdn.css' },
      ],
    },
  },
})

Then reference the families in your CSS / Tailwind theme:

@theme {
  --font-sans: 'GT Haptik', system-ui, sans-serif;
  --font-display: 'MohrAlt', 'GT Haptik', system-ui, sans-serif; /* uppercase only */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

Requires Access-Control-Allow-Origin on the CDN. This is the only route that renders real Mohr without shipping the files.

Option B — self-host the woff2 files

Copy the woff2 files into your app (e.g. public/fonts/) and declare @font-face yourself, pointing src at your own paths. Keep Mohr to Black + UPPERCASE per licence. This redistributes the files into your app — only do it for internal/authorised apps.

@font-face {
  font-family: 'GT Haptik';
  src: url('/fonts/GTHaptik-Regular.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
}
/* …repeat for bold/italic, MohrAlt (900), JetBrains Mono… */

Bring your own licensed woff/woff2 files and write your own @font-face rules — the installed package does not carry them. The canonical @font-face set lives in the repo's packages/fonts/forest-fonts.css, not in the installed package; use it as a reference for the family names, weights and styles to declare.