目次
AstroのドキュメントテンプレートStarlightでWEBフォントを使ってみたので備忘録です。
Fontsourceフォントの設定
StarlightでWEBフォントを利用する方法はいくつかありますが、ここではFontsourceを使用する方法を紹介します。
Fontsourceは、Google FontsやAdobe Fontsなどのフォントカタログからフォントを選択し、簡単にインストールできるパッケージです。
- フォントパッケージのインストール
Fontsourceのページから好きなフォントのパッケージをインストールします。
例えば、Noto Sans JPを使用する場合：
pnpm:
pnpm add @fontsource-variable/noto-sans-jp
npm:
npm install @fontsource-variable/noto-sans-jp
Yarn:
yarn add @fontsource-variable/noto-sans-jp
- astro.config.mjsの設定
astro.config.mjsファイルで、FontsourceのCSSファイルをStarlightのcustomCss配列に追加します：
astro.config.mjs
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ファイルでフォントを設定します：
tailwind.config.mjs
/** @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()],
};