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

noto sans jp

``` ### astro-google-fonts-optimizer `astro-google-fonts-optimizer` は、Google Fonts を最適化してパフォーマンスを向上させるためのプラグインです。このプラグインを使うことで、Google Fonts の読み込みをローカルに保存し、外部リクエストを減らすことでページのパフォーマンスを改善できます。以下のコマンドでインストールします。 ```bash npm install astro-google-fonts-optimizer ``` ```astro --- import { GoogleFontsOptimizer } from "astro-google-fonts-optimizer"; --- ``` https://github.com/sebholstein/astro-google-fonts-optimizer この設定により、Google Fonts のリクエストがローカルにキャッシュされ、より効率的にフォントが読み込まれるようになります。 ### @fontsource を使う `@fontsource` は、Google Fonts のフォントをローカルにインストールして使うことができるパッケージです。これを使うことで、フォントの読み込みが速くなり、外部リクエストが不要になります。以下のコマンドで `@fontsource/noto-sans-jp` をインストールします。 ```bash npm install @fontsource/noto-sans-jp ``` そして、使用するコンポーネントやページに以下のようにインポートします。 ```js import "@fontsource/noto-sans-jp"; ``` これにより、CSS の中で `font-family` を指定するだけで `Noto Sans JP` が使用可能になります。 ```css .notoSansJP { font-family: "Noto Sans JP", sans-serif; } ``` `@fontsource` を使うことで、フォントのロードが安定し、パフォーマンスの向上が期待できます。特に、オフライン環境でもフォントを利用できる点が大きな利点です。

HeadlessUI でダイアログを開いているときの overflow 問題

Next.js で CSP エラーが発生する場合の対処法

Astro で Google Font を使う