AstroとTailwindCSSで作ったサイトのフォントをNoto Sans JPにする方法

はじめに

AstroとTailwindCSSで作ったサイトのフォントをNoto Sans JPにする方法を紹介します。

方法

とはいえ、Fontsourceを使っているので、簡単です。
まずは、公式サイトのGetting Startedを参考に、 Noto Sans JPをインストールします。

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

次に、コンポーネントでインポートします。global.cssと一緒に取り込んでいます。
こんな感じ。

---
import "../styles/global.css";
import '@fontsource-variable/noto-sans-jp';
---

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="your keywords" content="Add ypour keywords here" />

最後に、global.cssでフォントを追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: 'Noto Sans JP Variable', sans-serif;
}
@supports (font-variation-settings: normal) {
  :root {
    font-family: 'Noto Sans JP Variable', sans-serif;
  }
}