Fontsource — Self-Host Open Source Fonts via NPM

Introduction

Fontsource packages over 2,000 open source fonts as individual NPM modules. Instead of loading fonts from Google Fonts or other CDNs at runtime, you install them as dependencies and bundle them with your application. This eliminates external network requests, improves load performance, and gives you full control over font delivery.

What Fontsource Does

• Packages every Google Fonts typeface as a standalone NPM module
• Provides pre-subsetted font files for Latin, Cyrillic, CJK, and other character sets
• Supports variable fonts with all available axes through @fontsource-variable packages
• Generates CSS imports for specific weights, styles, and subsets
• Includes both WOFF2 and WOFF formats for broad browser support

Architecture Overview

Each font package contains pre-built CSS files and font files organized by weight, style, and Unicode subset. When you import a package, its CSS declares @font-face rules pointing to local font files bundled in your application. The build tool (Webpack, Vite, etc.) resolves these imports and includes the font files in your output directory, requiring no runtime network requests.

Self-Hosting & Configuration

• Install any font: npm install @fontsource/roboto
• Import the default CSS in your entry file to load weight 400
• Import specific weights: import '@fontsource/roboto/700.css'
• Import specific subsets: import '@fontsource/roboto/latin-400.css'
• For variable fonts, install from @fontsource-variable scope instead

Key Features

• Over 2,000 fonts available as individual NPM packages
• Full variable font support with granular axis control
• Automatic Unicode subset splitting for smaller payloads
• Works with every bundler: Webpack, Vite, Parcel, Rollup, and more
• No runtime CDN dependency, improving privacy and performance

Comparison with Similar Tools

• Google Fonts CDN — zero install, but adds external network dependency and privacy concerns
• @next/font (next/font) — Next.js built-in font optimization; framework-specific
• Typefaces (deprecated) — predecessor project; no longer maintained, superseded by Fontsource
• Manual self-hosting — download font files yourself; no automatic subsetting or versioning
• Adobe Fonts (Typekit) — commercial service with runtime JS embed; subscription required

FAQ

Q: Does Fontsource include Google Fonts? A: Yes. All Google Fonts are available, plus other open source font collections like Font Library.

Q: How do I use variable fonts? A: Install from the @fontsource-variable scope (e.g., npm install @fontsource-variable/inter) and import the package. You can then use CSS font-variation-settings to control weight, width, and other axes.

Q: Will this increase my bundle size? A: Font files are loaded on demand by the browser, not included in your JS bundle. Subset imports limit downloads to only the character ranges your content uses.

Q: Does it work with Tailwind CSS? A: Yes. Install the font, import it in your CSS or entry file, then reference it in your Tailwind fontFamily config.

Sources

• https://github.com/fontsource/fontsource
• https://fontsource.org