Astro で Fontsource を使って Google Fonts などを簡単に利用する

Fontsource は、Google Fonts やオープンソースフォントを簡単に利用するためのパッケージ群のようなもの。フォントをセルフホスティングするため、外部にあるフォントファイルを読み込みに行く必要がなくなる。

まずは Fontsource から使いたいフォントを選び、ページ内の “Install” ボタンからインストールのためのコマンドをコピーする。ここでは Inter を例に挙げる。

pnpm add @fontsource-variable/inter

インストールができたら、このフォントを使いたいコンポーネントでインポートする。サイト全体で利用したい場合は Layout.astro などでインポートしておくとよい。

---
import '@fontsource-variable/inter';
---

次に、Fontsource の該当ページにある CSS セクションに記載のフォント名を参考に、プロジェクト内の CSS ファイルで font-family の値を指定する。

body {
  font-family: 'Inter Variable', sans-serif;
}

ちなみに、 Tailwind を使っている場合は @theme の中に次のように書いておくとよい。

@theme {
  --font-sans: 'Inter Variable', sans-serif;
}

参考

• Using custom fonts | Docs
• Fontsource