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 two exact things, not one

Cairo has no italic masters — its italic is the slnt axis, and the @font-face declares its true range (-11deg to 11deg). Two separate problems make a bare font-style: italic or bare font-style: oblique unsafe, and one pattern fixes both — see /compat for the full matrix and the measurements behind this:

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

State the exact angle, 11deg, not a bare keyword: CSS's implied default for "no angle stated" is 14deg, which falls outside this face's declared range and trips a Chromium/WebKit synthesis bug — stating the angle the face actually supports avoids it entirely. Then pair it with the explicit axis value: real Safari 18.7 performs no automatic font-style → slnt mapping at all, exact angle or not, so the axis has to be set directly regardless of what font-style-matching would do. Drop either half and it breaks on at least one real, tested engine or device — confirmed on real Safari 18.7 and 27.0, not just Chromium/Firefox/WebKit automation.

Frameworks may only expose italic

Tailwind's typography utilities are built around italic/not-italic, which map to font-style: italic/normal — there is no built-in oblique or axis-aware utility. Font declaration and framework usage are two separate problems: Cairo is correctly declared as an oblique face, but a framework's default italic utility still doesn't express the exact pattern above. Don't repurpose .italic — define a project utility instead:

@utility font-oblique {
  font-style: oblique 11deg;
  font-variation-settings: 'slnt' -11;
}

<p class="font-oblique">…</p>

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.