Astro StarlightでWEBフォントを利用する

2025/03/16

AstroのドキュメントテンプレートStarlightでWEBフォントを使ってみたので備忘録です。

Fontsourceフォントの設定

StarlightでWEBフォントを利用する方法はいくつかありますが、ここではFontsourceを使用する方法を紹介します。

Fontsourceは、Google FontsやAdobe Fontsなどのフォントカタログからフォントを選択し、簡単にインストールできるパッケージです。

フォントパッケージのインストール

Fontsourceのページから好きなフォントのパッケージをインストールします。

例えば、Noto Sans JPを使用する場合：
- pnpm
- npm
- Yarn
Terminal window
pnpm add @fontsource-variable/noto-sans-jp
Terminal window
npm install @fontsource-variable/noto-sans-jp
Terminal window
yarn add @fontsource-variable/noto-sans-jp

astro.config.mjsの設定

astro.config.mjsファイルで、FontsourceのCSSファイルをStarlightのcustomCss配列に追加します：

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
integrations: [
    starlight({
    title: 'カスタムフォントを設定したドキュメント',
    customCss: [
        '@fontsource-variable/noto-sans-jp',
    ],
    }),
],
});

フォントの適用

設定したフォントをサイトに適用するには、カスタムCSSファイルでフォント名を指定します。

全体に適用する場合

:root {
  --sl-font: 'Noto Sans JP Variable', serif;
}

特定の要素にのみ適用する場合

main {
  font-family: 'Noto Sans JP Variable', serif;
}

Tailwind CSSで適用する場合

tailwind.config.jsファイルでフォントを設定します：

import starlightPlugin from '@astrojs/starlight-tailwind';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Noto Sans JP Variable'],
      },
    },
  },
  plugins: [starlightPlugin()],
};