OSS TanbouOn this page
Overview
Fontsource packages open-source fonts as individual NPM dependencies for self-hosting in web applications. This can avoid extra font-CDN requests, pin font revisions with the application, and support offline or privacy-sensitive deployments.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Install a font family as an NPM dependency and import its CSS
Font families are distributed as @fontsource/* or variable-font packages and can be imported through CSS-aware bundlers.
Bundle only the weights, styles, or variable faces you need
Static packages expose weight/style-specific CSS, while supported variable packages can cover a continuous weight range with fewer files.
Sources: [3]
Best fit
Before adoption
Distinguish the repository license from each font asset license
The Fontsource repository is MIT licensed, while individual font packages use their own licenses such as SIL OFL, Apache-2.0, or Ubuntu Font License. Check the package-specific license before use.
Use fontsource/fontsource as the current canonical repository
The active canonical repository is fontsource/fontsource; dependency metadata and automation should not rely on the former googlefonts/fontsource owner path.
Sources: [1]
Official sources
- [1]Fontsource repository README(2026-10-04)
- [2]Fontsource core v0.5.1 release(2026-10-04)
- [3]Fontsource installation guide(2026-10-04)
- [4]@fontsource/roboto 5.3.0 package(2026-10-04)
- [5]Fontsource repository MIT license(2026-10-04)
Supplemental curator note
The canonical repository is fontsource/fontsource. The repository is MIT licensed, but font assets carry package-specific licenses such as OFL, so review each font package separately.
Try it in 3 steps
- 1
Add Roboto 5.3.0 as a local dependency
Pin a Fontsource font package inside the project. The Roboto package itself is licensed under OFL-1.1.
mkdir -p fontsource-demo && cd fontsource-demo && npm init -y >/dev/null && npm install @fontsource/roboto@5.3.0 - 2
Check the installed package version and license
Verify the font package license separately from the MIT license of the Fontsource repository.
cd fontsource-demo && node -e 'const p=require("./node_modules/@fontsource/roboto/package.json"); console.log(`version=${p.version} license=${p.license}`)' - 3
Import only the weight you need from CSS
This is ready for a CSS-aware bundler. Use explicit weights or a variable-font package depending on the application.
cd fontsource-demo && printf '@import "@fontsource/roboto/400.css";\nbody { font-family: "Roboto", sans-serif; }\n' > app.css && cat app.css
Growth
Growth trends · Last 30 days
6,155 Stars
Trend data is still being collected.
Development activity
Last 90 days · weekly
- Commits (last 30 days)
- 70
- Open PRs
- 7
Development activity is still being collected.
Built with
Categories and tags
Categories
Tags
GitHub data
GitHub dataView detailed GitHub data
GitHub Topics
- font
- fontsource
- google-fonts
- open-source
- fonts
- font-family
- font-files
- typefaces
- css
- font-loading
- sass
- Stars
- 6,155
- Forks
- 196
- Watchers
- 18
- Open issues
- 51
- Contributors
- 43
- Owner type
- Organization
- Primary language
- TypeScript
- License
- MIT
- Repository last updated
- Sep 30, 2026
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- commitlint18,758 Stars
2 shared tag(s) · 1 shared category(s) · Same language
lint Git commit messages against Conventional Commits and custom rules so release and changelog automation receives consistent metadata
TypeScript - React Spectrum15,911 Stars
2 shared tag(s) · 1 shared category(s) · Same language
build accessible React interfaces with styled Spectrum components or unstyled React Aria primitives
TypeScript - Changesets12,466 Stars
2 shared tag(s) · 1 shared category(s) · Same language
record SemVer bump intent and changelog notes with each change, then coordinate version updates and package publishing across monorepos
TypeScript - vanilla-extract10,435 Stars
2 shared tag(s) · 1 shared category(s) · Same language
write type-safe styles in TypeScript and extract them to static CSS at build time
TypeScript - Bootstrap174,984 Stars
2 shared tag(s) · 1 shared category(s)
Build responsive interfaces from a CSS/Sass grid, utilities, components, and native JavaScript
MDX - Electron123,376 Stars
2 shared tag(s) · 1 shared category(s)
bundle Chromium and Node.js to build desktop applications for three major operating systems with HTML, CSS, and JavaScript
C++
Report incorrect information
Tell us if any listing information is incorrect or outdated.