はじめに
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;
}
}