Fontsource Inter

@fontsource/inter packages the open-source Inter typeface — one of the most widely used interface fonts on the web — as a self-hostable npm module. Instead of pulling render-blocking requests from Google Fonts, you install the package, import the generated CSS, and serve the bundled WOFF2/WOFF files straight from your own build output.

It ships pre-generated @font-face CSS for every weight (100-900) in both normal and italic styles, plus subset-specific stylesheets (latin, latin-ext, cyrillic, cyrillic-ext, greek, greek-ext, vietnamese) so you only load the glyphs your audience needs. A companion variable-font package covers the full weight axis in a single file for teams that prefer one request over many.

What You Get

• Pre-generated @font-face CSS for every weight (100-900) in both normal and italic styles
• WOFF2 and WOFF binary font files bundled directly in the package, no CDN or external request required
• Subset-specific CSS (latin, latin-ext, cyrillic, cyrillic-ext, greek, greek-ext, vietnamese) for selective glyph loading
• SCSS mixins and a metadata/unicode JSON pair for tooling that needs to select subsets or weights programmatically

Common Use Cases

• Removing the Google Fonts network request to improve Core Web Vitals (LCP/CLS) and page-load reliability
• Self-hosting fonts in privacy-conscious apps (GDPR compliance, strict CSP) that cannot call out to Google’s font CDN
• Bundling Inter into a design system or component library shipped as a pinned, versioned dependency instead of a CDN link tag
• Serving only the subsets a target locale needs, cutting shipped font-file weight versus a single monolithic font file

Under The Hood

Architecture The repository is a monorepo of self-contained font directories under fonts/{google,variable,icons,variable-icons,other}/<name>/, each holding generated @font-face CSS split by weight, style, and subset (e.g. fonts/google/inter/400.css, cyrillic-400.css), matching binary files/.woff2 and files/.woff assets, per-font metadata.json/unicode.json/package.json, and scss/ mixins for Sass consumers. Root-level scripts/ (metadata.ts, fontlist.ts, algolia.ts, check-duplicates.ts, gfm-metadata.ts) aggregate every font directory’s metadata into top-level metadata/fontsource.json, FONTLIST.json, and Algolia search records used by fontsource.org; the actual CSS/font-file generation and npm publishing happen through the separate @fontsource-utils/cli and @fontsource-utils/publish tooling, so this repo is primarily a store of generated artifacts plus aggregation scripts rather than application logic.

Tech Stack Aggregation scripts are TypeScript executed via Bun (bun.lock, .mise.toml pins the Bun toolchain), depending on @fontsource-utils/cli, @fontsource-utils/publish, google-font-metadata, algoliasearch, consola, pathe, and json-stringify-pretty-compact. The published @fontsource/inter package itself has zero runtime JavaScript dependencies: it is pure CSS plus WOFF2/WOFF binaries and a stub index.d.css.ts for editor tooling, consumed via plain CSS imports or Sass mixins.

Code Quality There are no hand-written unit tests over application logic since this is a generated-asset repo; correctness is instead enforced by fontsource create-verify --all (from @fontsource-utils/cli) wired as the test script, plus a check-duplicates.ts script guarding against duplicate metadata across 2,000+ font families. Because CSS and metadata are generated from Google’s font source rather than hand-authored, manual-edit error risk is concentrated in the shared generation tooling rather than spread across each font’s files.

API Design Installing @fontsource/inter and importing @fontsource/inter/400.css (or the bare @fontsource/inter for the 400-weight default) requires zero configuration to get a working @font-face rule. The <weight>[-italic].css / <subset>-<weight>[-italic].css naming convention is identical across all 2,000+ Fontsource packages, so familiarity transfers directly between fonts. The tradeoff is package footprint: every subset/weight/style combination ships as its own CSS+WOFF2/WOFF pair (419 files, ~4.3MB unpacked for Inter), so consumers must cherry-pick specific imports rather than rely on automatic tree-shaking.