Fontsource

Fontsource とは

Fontsource は、オープンソースの Web フォントを npm パッケージとして導入して自家ホストする手段である。公開 CDN から実行時に読む代わりに、必要なウェイトとサブセットを選んでバンドルし、自分のドメインから配信する。結果として読み込みが速く、第三者に依存しない。

このプロジェクトは Web フォントを、手で貼り付ける素材ではなくコードとして扱い直す。各フォントはバージョン付きのパッケージとして提供され、更新は通常の依存管理の流れで処理され、丁寧なサブセット化で容量は抑えられる。本レビューは本番サイトでの自家ホストと、CDN 埋め込みとの比較に基づく。

できること

パッケージマネージャーで開発する人を明確に想定している。フロントエンド開発者は、他の依存と同じように導入・バージョン管理・更新ができる。自分のオリジンから配信し使うサブセットだけを送れるのは性能重視のチーム向きである。プライバシー重視のサイトは CDN への要求そのものをなくせる。

目で見て選んでそのまま置きたい非コーダーやデザイナーには不向きである。Fontsource はビルド工程を前提とするからである。より単純な体験が欲しければ別のフォント系ツールが適する。npm に慣れた人には、速く堅牢でプライバシーも守れる最も整理された手段の一つである。

向いている人

Fontsource は無料かつオープンソースで、読み解くべき購読枠はない。npm パッケージとして導入して必要な分だけ読み込み、フォント自体もオープンソースなので商用利用も無料である。npm レジストリに依存したくなければ、ファイルを直接置いてすべての素材を自分の環境内に留められる。

実際のコストは金銭ではなく技術面にある。正しく読み込み、パッケージを更新し、サブセットを管理する責務を負う。ビルドを運用するチームには、第三者依存を外す利点に比べればわずかである。書体ごとのライセンスは確認したいが、道具自体は純粋に無料である。

注意点

実際の Fontsource は、うたい文句どおり穏やかで予測しやすい環境を提供する。導入と必要なウェイトの読み込みは数行で済み、バンドルを通るため置き忘れや食い違いを追う必要がない。可変フォントなら 1ファイルで複数ウェイトを賄え、配信量も抑えられる。

わずらわしさは前提となる理解にある。要るウェイトとサブセットを決め、パッケージを最新に保ち、読み込みを検証するだけの理解が要る。開発者には容易だが、これはスクリプト貼り付け型 CDN が隠す責務である。見返りは十分で、余計な通信依存がなく、公開配信が止まっても体裁は保たれる。

What we like

最大の長所は自家ホストという形である。第三者への要求をなくせば性能とプライバシーが同時に改善し、自分のドメイン配信は CDN 埋め込みに対する明確な優位点である。パッケージ中心の流れは開発者にとって整理され、バージョン管理で更新も破綻しない。サブセットと可変対応で使う分だけの負担で済む。

What to watch out for

ビルド環境を前提とするため、貼り付けるだけの気軽な利用には向かない。自家ホストは運用も自分に移り、CDN 任せにせずフォントパッケージの更新を追う必要がある。規模が大きくコミュニティ主導でもあるため、商用利用前に書体ごとのライセンスを確認したい。導入さえ越えれば頼れる手法である。

Verdict

Web フォントをコードのように扱いたいなら、速く、秘匿性が高く、バージョン管理され、自家ホストできる Fontsource が正解である。npm に慣れた開発者には特に輝き、このディレクトリで最も堅牢な手段の一つである。アイコンには Iconify が合い、Coolors は文字色の選択を助ける。

Alternatives

このディレクトリの 2つの道具とよく組み合う。Iconify は似たパッケージと部品の手法でアイコンを持ち込むため、タイポグラフィとアイコンが 1つのコードベースで整合する。Coolors は、自家ホストした書体を読みやすく保つ文字色と背景色の選定を助ける。