フォント設定

インストール

noto-sans-jp をインストールします。

cd ~/astroblog
yarn add @fontsource/noto-sans-jp

BaseLayout.astro で import

私の場合は、layout.astro をチュートリアルに従って BaseLayout.astro としていてそれを読み込んでいるので、noto-sans-jp をインポートします。

import '@fontsource/noto-sans-jp';

global.css で設定。

私の場合 css は一つ、src/styles/global.css なのでそこに以下のように記述します。

font-family: "Noto Sans JP";

フォントを「Noto Sans JP」にすると横幅が狭くなるので広げました。

body {
  max-width: 120ch;
}