Astro.jsでFontsourceを使う理由｜Google Fonts・next/fontとの違い

Astro.jsを使い始めてしばらくして、フォントの読み込み方法として「Fontsource（フォントソース）」というライブラリに行き着きました。

私は最初、「Google Fontsで十分では？」「わざわざnpmで管理する必要ある？」と疑問に思いました。
また、Next.jsを触るようになると、「Next.jsのnext/fontとは何が違うのか？」という疑問も出てきました。

そこで調べてみると、Fontsourceはフォントをセルフホストしながらnpmで管理でき、Astroの開発環境とも相性がよいことが分かりました。
さらに、Astro 6では新たにFonts APIが追加され、FontsourceやGoogle FontsなどをAstroの設定から扱えるようになっています。

この記事では、Fontsourceの基本的な仕組みと使い方、Google Fontsやnext/fontとの違い、そして現在のAstroでWebフォントを扱う方法について整理します。

Fontsourceとは？

フォントをnpmパッケージとして管理できる

Fontsourceは、Google Fontsをはじめとするオープンソースフォントをnpmパッケージとして利用できるサービスです。
パッケージをプロジェクトにインストールすることで、フォントを外部のCDNから読み込むのではなく、自分のサイトから配信（セルフホスト）できます。

Astro専用のライブラリではなく、Vite、React、Next.js、Vueなどでも利用できます。

Google Fontsとの違い

一般的なGoogle FontsのCDNを利用する方法と、Fontsourceを直接利用する方法を比較すると、次のような違いがあります。

Google Fonts（CDN）	Fontsource
GoogleのCDNから配信	自分のサイトから配信
<link>などで読み込み	npmでインストールしてimport
Googleへの外部通信あり	フォント取得時の外部通信なし
導入が手軽	npmで依存関係として管理できる

Fontsourceだから優れていて、Google Fontsだから悪いということではありません。
大きな違いは、「フォントをどこから配信し、どのように管理するか」です。

Fontsourceの使い方

例えば、日本語フォントの「Noto Sans JP」のVariable Font（可変フォント）をAstroで使う場合。

1. パッケージをインストールする

npmを使う場合は、ターミナルから次のコマンドを実行します。

npm install @fontsource-variable/noto-sans-jp

これでNoto Sans JPのVariable Fontがプロジェクトに追加されます。

2. フォントをimportする

サイト全体で利用する場合は、共通レイアウト（BaseLayout.astroなど）からimportします。

import "@fontsource-variable/noto-sans-jp";

ちなみに、公式ドキュメントでは、以下のような書き方が案内されています。

import "@fontsource-variable/noto-sans-jp/wght.css";

しかし、前者の書き方でも、自動的にデフォルトの wght.css が読み込まれる仕組みになっています。
そのため、どちらの記述でも同様に動作します。

3. CSSでフォントを指定する

あとは通常のWebフォントと同じように、CSSのfont-familyを指定します。

body {
  font-family: "Noto Sans JP Variable", sans-serif;
}

これでNoto Sans JPを使用できます。

Variable Fontなら「font-weight: 550;」のような指定もできる

今回紹介しているのは、Noto Sans JPのVariable Fontをインストールするケースです。

Variable Fontでは、フォントの太さを従来の500や600といった段階だけでなく、対応範囲内で連続的に指定できます。
例えば、次のような指定も可能です。

.heading {
  font-weight: 550;
}

「500では少し細いけれど、600では少し太い」という場合に、その中間を指定できるわけです。

とはいえ、500、550、600の違いをどこまで目視で認識できるかは、フォントサイズや使用箇所によっても変わってくるでしょうが。
無理に細かく使い分ける必要はないと思いますが、デザインに合わせて微調整できるのはVariable Fontのおもしろいところです。

Astro.jsでFontsourceを採用する理由

npmでフォントを管理できる

Astroでは、さまざまなライブラリや機能をnpmパッケージとしてプロジェクトに追加します。

Fontsourceを使えば、フォントも同じように依存関係として管理できます。
「どのフォントを使っているのか」がpackage.jsonから分かり、フォントのバージョンもプロジェクト側で管理できます。

importして利用できる

Fontsourceを直接利用する場合、インストールしたフォントをAstroファイルなどからimportできます。

Astroが利用しているViteは、FontsourceのCSSとそこから参照されるフォントファイルを処理し、ビルド後にはサイトのアセットとして配信してくれます。
フォントファイルを自分でダウンロードしてpublicディレクトリへ配置し、@font-faceを一から記述するという作業を省けるのは便利です。

外部通信に依存しない

Google FontsをCDNから直接読み込む場合、サイトを閲覧したユーザーのブラウザからGoogleのサーバーへ通信が発生します。

Fontsourceでセルフホストすれば、公開したサイト自身からフォントファイルを配信できます。
外部サービスへの依存を減らせることに加えて、フォントもサイトを構成するアセットの1つとして管理できます。

Astro 6ではFonts APIも使える

ここまで紹介したのは、Fontsourceのパッケージを自分でインストールしてimportする方法です。

しかし、Astro 6ではFonts APIが追加され、Webフォントの扱い方にも新しい選択肢が加わりました。
Fonts APIでは、Fontsource、Google Fonts、ローカルフォントなどをAstroの設定から扱えます。

例えば、Fontsourceを利用する場合は、astro.config.mjsで次のように設定できます。

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  fonts: [
    {
      provider: fontProviders.fontsource(),
      name: "Roboto",
      cssVariable: "--font-roboto",
    },
  ],
});

Astro側でフォントをダウンロード・キャッシュし、サイト自身から配信する仕組みになっています。
さらに、preloadやフォールバックフォントの最適化などもFonts API側で行われます。

つまり現在のAstroでは、
「Fontsourceのnpmパッケージを直接利用する」だけでなく、
「AstroのFonts APIからFontsourceを利用する」という方法も選べるようになっています。

Next.jsのnext/fontとの違い

ここは、Next.js初学者でもある私に向けた備忘録みたいなものですが……。

Next.jsを触ったことがある方なら、next/fontを使った経験があるかもしれません。

next/fontはNext.jsのフォント最適化機能

Next.jsにはnext/fontが用意されており、Google Fontsやローカルフォントを扱えます。

例えばGoogle Fontsを使う場合でも、ユーザーがサイトを閲覧するたびにGoogleへフォントを取得しにいくわけではありません。
Next.js側でフォントをセルフホストし、サイトと同じドメインから配信します。

そのため、
「Google Fontsを使う＝必ずブラウザからGoogleへ外部通信する」
というわけではない点には注意が必要です。

Astro 6のFonts APIと考え方が近い

以前のAstroには、next/fontに直接対応するような標準のフォント機能はありませんでした。
しかし、Astro 6でFonts APIが追加されたことで状況が変わりました。
AstroのFonts APIも、外部のフォントプロバイダーからフォントを取得してキャッシュし、自分のサイトから配信します。

完全に同じ機能ではありませんが、

• フレームワーク側でWebフォントを管理する
• フォントをセルフホストする
• 読み込みを最適化する

という点では、next/fontとAstroのFonts APIには似た考え方があります。

Fontsource・Astro Fonts API・next/fontの違い

ここまでを簡単に整理してみます。

	Fontsourceを直接利用	Astro Fonts API	next/font
主な対象	複数のフレームワーク	Astro	Next.js
管理方法	npmパッケージ	Astroの設定	Next.jsのAPI
セルフホスト	○	○	○
Google Fonts	Fontsourceで提供されるフォントを利用	Google Providerを利用可能	next/font/google
Fontsource	直接利用	Providerとして利用可能	必要なら別途Fontsourceを利用
最適化	必要に応じて自分で調整	Astroが支援	Next.jsが支援

Next.jsならnext/font、AstroならFonts APIというように、現在ではフレームワーク側がWebフォントを管理・最適化する仕組みも整ってきています。

一方、FontsourceそのものはAstro専用ではありません。
そのため、Fontsourceを知っておけば、Astro以外の環境でもセルフホストしたWebフォントを扱う選択肢になります。

Google Fontsはダメなのか？

いいえ、そんなことはありません。

Google FontsをCDNから直接読み込む方法は導入が簡単です。
例えば、ちょっとした試作やHTML・CSS・JavaScriptだけで作るページなどでは、わざわざnpmでフォントを管理する必要がないケースもあるでしょう。

また、Astro 6のFonts APIやNext.jsのnext/fontを利用すれば、Google Fontsを選びながらセルフホストすることもできます。

そのため、
「Google FontsかFontsourceか」だけで考えるよりも、
「どのフォントを使うか」
「どこから配信するか」
「どのようにプロジェクトで管理するか」
を分けて考えた方が分かりやすそうです。

私がFontsourceを使ってきた理由

私がAstroの実案件でFontsourceを使ってきた理由は、シンプルです。

• npmで依存関係として管理できる
• importして使える
• セルフホストできる
• Astro（Vite）の開発環境と相性がよい

さらにAstro 6ではFonts APIが登場したため、これから新しくAstroサイトを制作する場合は、Fonts APIを使う方法も選択肢になります。
私自身も、「これからもFontsourceを直接importするのか」「AstroのFonts APIへ移行するのか」は、実際に使いながら判断していきたいと思います。

まとめ

Fontsourceは、オープンソースフォントをnpmで管理し、セルフホストできる仕組みです。
Astroとの相性もよく、これまで私は実案件でもFontsourceを利用してきました。

一方、Astro 6ではFonts APIが追加され、FontsourceやGoogle FontsなどをAstro側で管理・最適化する方法も選べるようになっています。
Next.jsにもnext/fontがあるため、現在はAstroとNext.jsのどちらでも、フレームワーク側の仕組みを使ってWebフォントをセルフホストしやすくなっています。

Fontsource、Google Fonts、Astro Fonts API、next/font。
名前だけを見ると少し複雑ですが、「どのフォントを、どこから配信して、どう管理するのか」と分けて考えると整理しやすくなります。

どれか1つが正解ということではなく、制作するサイトや開発環境に合わせて選べばよいのではないでしょうか。