What it does
Fontsource packages open-source font families for self-hosting through npm, a JavaScript package manager. Its guides cover static and variable fonts, CSS imports, language subsets and version management. Public packages and direct file downloads are available without an account.
Add a font to your application
For Open Sans, the installation guide starts with npm install @fontsource-variable/open-sans, then imports @fontsource-variable/open-sans in the application entry file. Use font-family: "Open Sans", sans-serif in your CSS. This route expects a build tool such as Vite or Webpack that handles CSS imports.
Variable packages cover a range of weights in one font. Static packages use separate imports for each weight and style: a normal-style import does not include italic. Generated CSS uses unicode-range so the browser requests the character sets used on the page.
Font packages stay version-locked with your dependencies, so updates can be reviewed alongside other application changes. Each font retains its own open licence.
Strengths
- Provides versioned font packages.
- Documents static and variable import paths.
Watch out for
- The documented import workflow expects a CSS-capable bundler.
Best for
- Developers self-hosting open fonts.
- Applications managing fonts with other dependencies.
Sources
- Introduction | Documentation | Fontsource (Oct 27, 2026)
- Installing Fonts | Documentation | Fontsource (Oct 27, 2026)