FontsourceでAstroにWebフォントを導入する方法

AstroでGoogle Fontsやオープンソースのフォントを手軽に使用したい場合、 Fontsource を使うと便利です。

今回の記事では、AstroのプロジェクトにFontsourceを導入し、フォントを使用する方法を解説します。

Fontsourceとは

Fontsourceは、Google Fontsやその他のオープンソースのフォントをNPMパッケージとして利用できるライブラリです。

Fontsourceを使うことで、以下のようなメリットがあります。

パフォーマンスの向上
バージョン管理がしやすい
プライバシーの向上
オフラインでの利用が可能

メリット1. パフォーマンスの向上

WebフォントのサービスとしてGoogle Fontsが有名ですが、CDNを経由して読み込むため、パフォーマンスが悪化することがあります。それに対してFontsourceは、NPMパッケージとしてインストールするため、CDNに比べるとパフォーマンスが向上します。

メリット2. バージョン管理がしやすい

また、Google Fontsではフォントのバージョンアップが自動で行われるため、意図しないフォントの変更が発生することがあります。Fontsourceでは、NPMパッケージとしてフォントを利用するので、バージョンのロックやアップデートなどを自身で管理することが可能です。

メリット3. プライバシーの向上

Google Fontsはフォントを読み込む際にユーザーの情報がGoogleに送信されるため、プライバシーが懸念されます。Fontsourceは、フォントを自身のサーバーに保存すること（セルフホスティング）が可能なので、プライバシーの向上が期待できます。

メリット4. オフラインでの利用が可能

Fontsourceでフォントをインストールすると、オフラインでの利用が可能です。インターネットに接続できない状況でも、ローカル環境での開発中にフォントを表示することができます。

AstroにFontsourceでフォントを導入する手順

FontsourceをAstroのプロジェクトに導入する手順は以下の通りです。

Fontsourceで使用したいフォントを探す
フォントのパッケージをインストールする
Layoutコンポーネントでフォントを読み込む
CSSでフォントを指定する

1. Fontsourceで使用したいフォントを探す

まずは、 Fontsource のサイトから使用したいフォントを探します。

ここでは、 Noto Sans JP を読み込む場合を例に進めます。

2. フォントのパッケージをインストールする

[Install]をクリックし、Installationの箇所のコマンドをコピーします。

ターミナルでコマンドを実行して、フォントのパッケージをインストールします。

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

3. Layoutコンポーネントでフォントを読み込む

サイト全体でフォントを利用するために、共通のコンポーネントであるLayoutコンポーネントでフォントを読み込みます。

インポート時に記述するコードは、Fontsourceの[Import]からコピーしてください。

src/layouts/Layout.astro

Astro

    ---
// Supports weights 100-900
import '@fontsource-variable/noto-sans-jp';
---

これで、プロジェクト全体でNoto Sans JPが利用できるようになりました。

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

最後に、CSSでフォントを指定します。

[CSS]からコードをコピーして、スタイルに記述します。

src/layouts/Layout.astro

Astro

    ---
// Supports weights 100-900
import '@fontsource-variable/noto-sans-jp';
---
 
<style>
  body {
    font-family: 'Noto Sans JP Variable', sans-serif;
  }
</style>

これでbody要素にNoto Sans JPが適用されました。

ここではstyleタグ内に記述しましたが、CSSファイル内や他の場所でも使用可能です。

もし他のページやコンポーネントでフォントを適用したい場合は、CSS変数化しておくと便利です。

src/layouts/Layout.astro

Astro

    <style>
  :root {
    --font-noto: 'Noto Sans JP Variable', sans-serif;
  }
</style>

これでサイト全体でCSS変数を利用できるようになります。

【まとめ】FontsourceでAstroにフォントを導入する方法

今回の記事では、FontsourceでAstroにWebフォントを導入する方法を解説しました。

Fontsourceから使用したいフォントを探す
フォントのパッケージをインストールする
共通コンポーネントでフォントを読み込む
CSSでフォントを指定する

という手順で簡単にWebフォントを導入することができます。

実際に使用してみた感想としては、手軽にフォントを導入できるという点においては優れていると感じました。

ただし、パフォーマンスに関してはまだまだ改善点がありそうなので、よりよい方法が見つかればまた記事にしたいと思います。