Use these fonts

Cairo, IBM Plex Sans and Fira Code, served as a versioned, unicode-range-split fonts.css from fonts.vizchitra.com — CORS-enabled, cache-forever, and reproducible from this repo's font-src/. Only Cairo is ever modified; Plex and Fira Code are redistributed exactly as upstream ships them. Full specimen, axes and file sizes are in the catalogue.

On the web

Link the canonical stylesheet directly — no build step, no self-hosting required:

<link rel="stylesheet" href="https://fonts.vizchitra.com/v1/fonts.css">

Or self-host by downloading fonts.css and the .woff2 files it references from manifest.json — everything under /v1/ is versioned and immutable, so it's safe to vendor and cache indefinitely. A future /v2/ will coexist with /v1/ rather than replace it.

Reference by CSS custom property, not by name

Each family is exposed as a custom property so the underlying font can change without touching every call site — this is how Cairo will be swapped for VizChitra Sans later without a second round of edits across every consuming site:

:root {
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, monospace;
  --font-display: 'Cairo', var(--font-sans);
}

body { font-family: var(--font-sans); }
h1, h2 { font-family: var(--font-display); }
code, pre { font-family: var(--font-mono); }

Never write font-family: 'Cairo' (or 'IBM Plex Sans', 'Fira Code') directly at a call site — always through the custom property, even though it resolves to the same family today.

Cairo's italic needs one extra line

Cairo has no italic masters — its italic is the slnt axis — and real Safari does not reliably perform the automatic font-style → slnt mapping this depends on (version-dependent; see /compat for the full matrix). Pair font-style with an explicit axis value rather than relying on font-style: italic alone:

.italic {
  font-style: oblique;
  font-variation-settings: 'slnt' -11;
}

font-style: oblique stays for semantics and forward-compatibility; the explicit slnt value is what makes it render correctly on every engine and version today.

Fira Code: weight and ligatures

Fira Code's own upstream family name is "Fira Code Light" and its wght axis defaults to 300 internally — but fonts.css declares font-weight: 300 700 as a range, so leaving font-weight unset resolves to CSS's own initial value (400), not the font's internal default. Set it explicitly anyway if you want a specific weight. Every one of its 86 code ligatures is powered by calt, which is on by default — if you need to turn ligatures off, use font-variant-ligatures: no-contextual or font-feature-settings: 'calt' 0 (the second wins if both are set on the same element); font-variant-ligatures: no-common-ligatures does nothing here, since that maps to liga/clig, which Fira Code doesn't use.

In Figma

Not yet needed: Cairo, IBM Plex Sans and Fira Code are all already available directly from Google Fonts inside Figma today, so there is nothing this repo needs to document until VizChitra Sans exists (Phase 3) and needs a custom install path — static instances, the Figma font-helper, and so on. This section is a placeholder for that.