Fontsourceとは？Self-host Web Fonts via NPM

ページ内ナビ

概要

FontsourceはOpen Source fontを個別のNPM packageとして配布し、Web application内でself-hostできるようにするmonorepoです。CDNへの追加requestを避け、font versionをdependencyとして固定し、offline利用やprivacy要件にも対応しやすくします。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-04

主な特徴

font familyをNPM dependencyとしてinstallしてCSSから読み込む

各font familyは@fontsource/*やvariable-font packageとして配布され、bundlerからCSSをimportして必要なweight/styleをapplicationへ含められます。

出典：[1][3]

weight・style・variable fontを必要な範囲だけbundleする

static packageではweight/style別CSSを選択でき、variable fontがあるfamilyではvariable packageを使って複数weightをまとめられます。

出典：[3]

fontをapplication dependencyとしてversion lockする

remote font provider側の更新からproduction表示を切り離し、package versionをlockfileと一緒に管理できます。Roboto packageの現行latestは5.3.0です。

出典：[1][4]

向いている用途

Web fontをself-hostしてperformance・privacy・offline性を管理したい場合に向く

Vite/Webpack等でCSSをbundleするWeb applicationやPWAで、font fileもapplication artifactとして配布したい用途に適します。

出典：[1][3]

導入前の確認

repository licenseと各font assetのlicenseを分けて確認する

Fontsource repository自体はMITですが、配布fontはSIL Open Font License、Apache-2.0、Ubuntu Font License等それぞれ異なります。利用するfont package単位でlicenseを確認します。

出典：[1][5][4]

現行repositoryはfontsource/fontsourceで旧googlefonts/fontsourceではない

現在のcanonical repositoryはfontsource/fontsourceです。dependency metadataやautomationでは現行owner/repoを参照します。

出典：[1]

参考にした公式資料

[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)

編集部からの補足

canonical repositoryはfontsource/fontsourceです。repositoryはMITですが、実際のfont assetはpackageごとにOFL等の個別licenseを持つため、利用font単位で確認してください。

3ステップで試す

1
Roboto 5.3.0をlocal dependencyとして追加する
Fontsourceのfont packageをversion固定してproject内へinstallします。Roboto package自体のlicenseはOFL-1.1です。
mkdir -p fontsource-demo && cd fontsource-demo && npm init -y >/dev/null && npm install @fontsource/roboto@5.3.0
2
install済みpackageのversionとlicenseを確認する
repositoryのMIT licenseとは別に、実際に使うfont packageのlicenseを確認します。
cd fontsource-demo && node -e 'const p=require("./node_modules/@fontsource/roboto/package.json"); console.log(`version=${p.version} license=${p.license}`)'
3
必要なweightだけをCSSへimportする
CSS-aware bundlerへ渡す最小例です。複数weightが必要なら個別importかvariable font packageを検討します。
cd fontsource-demo && printf '@import "@fontsource/roboto/400.css";\nbody { font-family: "Roboto", sans-serif; }\n' > app.css && cat app.css

公式READMEで確認

成長

成長の推移 · 直近30日

6,155 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 70
Open PR: 7

開発アクティビティを蓄積中です。

Built with

TypeScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

font
fontsource
google-fonts
open-source
fonts
font-family
google
font-files
typefaces
css
font-loading
sass

Stars: 6,155
Forks: 196
Watchers: 18
Open Issues: 51
Contributors: 43
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/30