@fvc/fonts

Self-hosted webfonts for the FVC design system: Montserrat and Roboto, as variable woff2, split by unicode-range.

This package is optional. No other @fvc package depends on it, and the design system renders with the system font stack when it is absent. Install it when you want the FVC typefaces; leave it out when you bring your own.

Live documentation with runnable examples: Storybook → Foundations → Fonts and Foundations → Typography (bun run storybook in the monorepo).

Install

bun add @fvc/fonts

Use

One import in the application entry, next to the other global imports:

import '@fvc/fonts';

That is all. @fvc/utils already points --fvc-font-body at Roboto and --fvc-font-heading at Montserrat, so every component picks the fonts up.

Only one family:

import '@fvc/fonts/montserrat.css';
import '@fvc/fonts/roboto.css';

What the browser downloads

Each family ships one variable file per subset and style, and every @font-face rule carries the subset's unicode-range. The browser fetches a file only when the page actually renders a character from that range, so the install size and the download size are different numbers:

| | Files | Size | |---|---|---| | Montserrat — latin, latin-ext, cyrillic, cyrillic-ext, vietnamese | 10 | 319.9 KB | | Roboto — latin, latin-ext, cyrillic, cyrillic-ext, greek, greek-ext, vietnamese, math, symbols | 18 | 395.4 KB | | Total in the package | 28 | 715.3 KB |

| Page | Downloaded | |---|---| | Azerbaijani or English UI | ~162 KB (latin + latin-ext, both families) | | Russian text appears | + ~40 KB (cyrillic) | | Greek text appears | + ~28 KB (greek) |

Every subset upstream offers is published. A library cannot know which languages its consumers support, and the unicode-range mechanism means the unused ones cost nothing at runtime.

The weights are covered by the variable axis (font-weight: 100 900), so font-weight: 350 works and no extra file is downloaded for it.

Bring your own typeface instead

Do not install this package. Declare your own @font-face rules, then point the two design-system tokens at the family you declared:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fvc-font-body: 'Inter', system-ui, sans-serif;
  --fvc-font-heading: 'Inter', system-ui, sans-serif;
}

Every @fvc component reads from those two tokens, so nothing else has to change. Single components can still be retyped one at a time through their own CSS API (--card-font-family, --input-font-family, …).

Use no webfont at all

Install nothing and override nothing. Both tokens end in a system fallback stack, so the design system renders in the platform UI font.

Runtime has no external dependency

The woff2 files are committed to this package and served from your own origin. Nothing is fetched from a CDN at runtime, so there is no third-party request, no font-src exception to add to a strict CSP, and no availability risk from somebody else's network.

Regenerating the files

scripts/fetch-fonts.ts materialises the binaries and the stylesheets. sources.json pins every upstream URL together with its SHA-256.

# Reproduce the committed files and verify every checksum
bun run fonts:verify

# Refresh from upstream: rewrites sources.json, then materialises
bun run fonts:update

fonts:verify fails if a pinned file no longer hashes to the recorded value, which is how an upstream revision surfaces as a reviewable sources.json diff instead of a silent change. Both commands are maintenance tools — they are not part of install, build or CI.

Licences

Both families are licensed under the SIL Open Font License 1.1. The notices ship inside the package:

• licences/Montserrat-OFL.txt
• licences/Roboto-OFL.txt