Fontsource
Self-host open-source fonts as npm packages with automatic subsetting and updating.
Open the official app on fontsource.org
This tool is hosted by its maintainers. Click below to open fontsource.org in a new tab — it's their official demo.
Browse design tools →What's next with Fontsource?
Choose how you want to get started.
Use it free
Open the official tool or demo — no account needed.
Self-host it
Run the open-source version on your own infrastructure.
What is Fontsource?
Fontsource is an open-source project that enables developers to self-host open-source fonts via bundled NPM packages. Its primary purpose is to simplify the integration of web fonts into projects by providing pre-configured, version-controlled font distributions. Developers, designers, and teams use Fontsource to avoid reliance on external CDNs like Google Fonts, ensuring consistent font availability and performance. The tool addresses the challenge of managing font files, subsetting, and cross-browser compatibility by offering a centralized repository of over 2,000 font families, including variable fonts and popular typefaces like Roboto and JetBrains Mono. By bundling fonts into NPM packages, Fontsource streamlines deployment and reduces dependency on third-party services, making it a critical tool for projects requiring strict control over font assets.
How it works
Fontsource is a platform that curates and distributes open-source fonts as NPM packages, allowing developers to integrate them into projects without external dependencies. It focuses on providing a reliable, self-hosted solution for web fonts, emphasizing version control and package management. The tool is designed for developers and teams that need to ensure consistent font availability across environments. By bundling fonts into NPM packages, Fontsource eliminates the need for external CDNs, reducing potential latency and dependency issues. Fontsource offers pre-configured NPM packages for over 2,000 font families, including variable fonts like Roboto Variable and JetBrains Mono Variable. It supports filtering by category, language, and font type, with a searchable interface for quick access. The platform also provides grid and list views for organizing font selections.
How to use it
- 1Open the Fontsource page
- 2Use the tool directly in your browser
- 3Results appear instantly — no waiting, no downloads
What it can do
- font CDN
Use cases
Assumptions and limitations
Assumptions
- source: https://github.com/fontsource/fontsource
- license: MIT — free to use
- privacy: Self-hosted — you control your data
Limitations
- Requires technical setup for NPM package management and build tool integration
- Limited customization options beyond pre-configured font packages
- Font availability depends on upstream open-source projects' maintenance
- No built-in font preview or real-time styling adjustments
- Manual configuration needed for advanced font variant selections
Understanding the result
Self-host open-source fonts as npm packages with automatic subsetting and updating.
Tool details
- Clearly flagged when a network request is needed.
- No account, no sign-up, and no tracking of your content.
- Powered by (MIT).
- Built with
- (fontsource/fontsource)
- License
- MIT
- Runs locally
- No — requires a network request
- Verification
- Not yet verified
- Input
- Query
- Output
- Text
Built with fontsource/fontsource. OpenToolVault provides the discovery and browser interface while crediting the original project maintainers.
- Built with
- License
- MIT
Open-source project
OpenToolVault is an independent directory. We are not affiliated with or endorsed by this project.
References
- / — GitHub Repository
Upstream project · GitHub
- MIT License
Upstream project
Frequently asked
How does Fontsource handle font versioning and updates?
Fontsource uses semantic versioning for its NPM packages, ensuring compatibility with project dependencies. When a font's source repository releases updates, Fontsource maintains versioned packages that developers can upgrade by updating the NPM dependency. This system allows projects to lock into specific font versions while benefiting from upstream improvements through controlled updates.
How does Fontsource bundle fonts for NPM distribution?
Fontsource packages fonts into NPM modules by including optimized font files (WOFF2, WOFF, TTF) and CSS configuration files. Each package contains a `fonts.css` file with `@font-face` declarations and metadata about available weights and styles. The bundling process ensures fonts are ready for immediate use in CSS, with versioned packages maintaining backward compatibility for projects relying on specific font configurations.
How do I use a specific font variant like 'Roboto:700' with Fontsource?
To use a specific font variant, install the corresponding NPM package (e.g., `@fontsource/roboto` for the full Roboto family) and import the font in CSS with the desired weight and style. For example: `@import '@fontsource/roboto/roboto-bold';` will apply the bold variant. The package's CSS file includes all available variants, and developers can selectively import subsets to reduce file size.
How does Fontsource compare to Google Fonts?
Fontsource differs from Google Fonts by offering self-hosted, version-controlled font distributions via NPM, while Google Fonts relies on a CDN. Fontsource provides greater control over font versions and avoids CDN dependency, but lacks Google Fonts' extensive font library and automatic loading features. Developers choose Fontsource for projects requiring offline access or strict dependency management, while Google Fonts is preferred for quick, CDN-based font integration.
What should I do if a font isn't loading after installation?
First, verify the font package is correctly installed in the project's node_modules directory. Check the CSS import statement for typos or incorrect package names. Ensure the build tool (e.g., Webpack, Vite) is configured to process CSS files and that the font files are included in the output. If issues persist, inspect the browser's developer console for errors and confirm the font files are accessible via the correct paths.