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
関連記事はありません。
Trends