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;
  }
}

この書き方は、:root（＝<html>）にしかフォントを指定していません。<body> 側に Tailwind の font-sans クラスが付いていると、--font-sans（ui-sans-serif, system-ui, sans-serif, ...）が <body> 自身に適用され、そこから下は全部そちらを継承します。結果、CSSは読み込まれているのにNoto Sans JPが一度も使われないという状態になります。

当ブログでも実際にこれが起きていて、203KBぶんの @font-face を配信しながら表示はシステムフォントのまま、という無駄が発生していました。

<body class="... font-sans ..."> を使っている場合は、:root ではなくTailwind側のフォント定義そのものを差し替えてください。Tailwind CSS v4 なら次のように書きます。

@theme {
  --font-sans: "Noto Sans JP Variable", sans-serif;
}

指定できたかどうかは、DevToolsで <body> を選択し、Computed の font-family に Noto Sans JP Variable が入っているかで確認できます。

なお、Webフォントを実際に適用するとフォールバックからの差し替え時にレイアウトシフト（CLS）が起きます。@font-face に size-adjust / ascent-override などのメトリクス上書きを併用するか、主要サブセットを preload する対策もあわせて検討してください。

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

はじめに

方法

関連記事

この記事を書いた人