Astro Starlightでフォントを指定する

Starlightではフォントの指定方法がいくつかあるが、フォントファミリーを指定する場合は、カスタムのCSSファイルを作成して既定の値を上書きする。

• Use font
• Custom CSS styles

ドキュメントに従う。まず src/styles/custom.css ファイルを作成し、 --sl-font を上書きする。

:root {
  --sl-font: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro',
    'メイリオ', Meiryo, Verdana, 'ＭＳ Ｐゴシック', sans-serif;
}

次いで、CSSファイルを読み込むように astro.config.mjs に記述する。

export default defineConfig({
  integrations: [
    starlight({
      customCss: [
        './src/styles/custom.css',
      ],
    }),
  ],
});