@grafana/fonts

Self-hosted Inter and JetBrains Mono variable font files for @grafana/design, so applications don't depend on external font services or locally-installed fonts.

• Inter — variable font, weights 100–900. Used as the UI font.
• JetBrains Mono — variable font, weights 100–800, normal and italic. Used as the monospace font for code.

Both families ship as a single woff2 file per script, with font-display: swap applied to all @font-face declarations for predictable loading behavior.

Usage

Import the CSS once at the root of your app to load both families:

import '@grafana/fonts/fonts.css';

Or import the JS entry, which does the same (useful in bundler setups that prefer JS-only imports):

import '@grafana/fonts';

The font names exposed are Inter and JetBrains Mono — these match the values used by @grafana/design-tokens's primitives.typography.fontFamily.ui and primitives.typography.fontFamily.monospace, so no extra CSS configuration is needed beyond the import.

Via @grafana/components

If your app imports anything from @grafana/components, the fonts CSS is loaded transitively — @grafana/components's entry point (src/index.ts) does the side-effect import, so a typical Grafana plugin or app needs no explicit @grafana/fonts/fonts.css line:

import { ComparisonBadge } from '@grafana/components';
// fonts.css is already registered by the import above

Add an explicit @grafana/fonts/fonts.css import only if you're using fonts in a context that doesn't depend on @grafana/components — e.g. a CSS-only consumer, a non-React surface, or an app that uses <ColorModeProvider> from @grafana/theme-providers directly without pulling in any components.

Vite consumers

The bundled fonts.css references woff2 files via relative url(...) paths that resolve to this package's dist/files/ directory inside node_modules. That works out of the box for published consumers.

If you're developing against a locally-linked copy of this package (via pnpm link, npm link, or a sibling-path resolution shim), Vite's default server.fs.allow is restricted to the consumer project's root and will refuse to serve woff2 files from outside it. Widen the allowlist in vite.config.ts:

export default defineConfig({
  server: {
    fs: {
      // Allow the dev server to serve font files from locally-linked
      // sibling packages.
      allow: ['..'],
    },
  },
});

Production builds bundle the font files in via the consumer's normal asset pipeline, so this only affects vite dev.

Font feature settings

The CSS also exposes a --font-feature-settings-ui custom property containing a curated set of OpenType features for Inter — contextual alternates, alternate numerals, square punctuation/quotes, alternate 1/l, compact f, tabular numerals, and slashed zero. Apply it via:

body {
  font-feature-settings: var(--font-feature-settings-ui);
}

Building

Font files are copied from the upstream packages (inter-ui, @fontsource-variable/jetbrains-mono) into dist/files/ and a combined dist/fonts.css is assembled.

pnpm build