Astro で Google Font を使う

要約
@import を使った簡単な方法、astro-google-fonts-optimizer を使った最適化手法、そして @fontsource を使ったフォントのローカルインストール方法の 3 つについて説明します。
意見はこのエリアに表示されます

Astro で Google Font を使う

@import を使う

この方法では、Google Fonts の @import を使用してスタイルを埋め込み、特定のクラスにフォントを適用します。これは簡単な方法ですが、外部リクエストが必要なため、ページの読み込み速度に影響を与える可能性があります。

astro-google-fonts-optimizer

astro-google-fonts-optimizer は、Google Fonts を最適化してパフォーマンスを向上させるためのプラグインです。このプラグインを使うことで、Google Fonts の読み込みをローカルに保存し、外部リクエストを減らすことでページのパフォーマンスを改善できます。

以下のコマンドでインストールします。

この設定により、Google Fonts のリクエストがローカルにキャッシュされ、より効率的にフォントが読み込まれるようになります。

@fontsource を使う

@fontsource は、Google Fonts のフォントをローカルにインストールして使うことができるパッケージです。これを使うことで、フォントの読み込みが速くなり、外部リクエストが不要になります。

以下のコマンドで @fontsource/noto-sans-jp をインストールします。

そして、使用するコンポーネントやページに以下のようにインポートします。

これにより、CSS の中で font-family を指定するだけで Noto Sans JP が使用可能になります。

@fontsource を使うことで、フォントのロードが安定し、パフォーマンスの向上が期待できます。特に、オフライン環境でもフォントを利用できる点が大きな利点です。

Explore More
関連記事はありません。