AstroのドキュメントテンプレートStarlightでWEBフォントを使ってみたので備忘録です。
<h2 id="fontsource%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="3" class="code-line"><a class="header-anchor-link" href="#fontsource%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Fontsourceフォントの設定</h2>
StarlightでWEBフォントを利用する方法はいくつかありますが、ここではFontsourceを使用する方法を紹介します。
Fontsourceは、Google FontsやAdobe Fontsなどのフォントカタログからフォントを選択し、簡単にインストールできるパッケージです。
<ol data-line="8" class="code-line">
<li data-line="8" class="code-line">フォントパッケージのインストール</li>
</ol>
<a href="https://fontsource.org/" target="_blank" rel="nofollow noopener noreferrer">Fontsourceのページ</a>から好きなフォントのパッケージをインストールします。
例えば、Noto Sans JPを使用する場合：
pnpm:
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="15">pnpm add @fontsource-variable/noto-sans-jp
</code></pre></div>npm:
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="20">npm install @fontsource-variable/noto-sans-jp
</code></pre></div>Yarn:
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="25">yarn add @fontsource-variable/noto-sans-jp
</code></pre></div><ol start="2" data-line="29" class="code-line">
<li data-line="29" class="code-line">astro.config.mjsの設定</li>
</ol>
<code>astro.config.mjs</code>ファイルで、FontsourceのCSSファイルをStarlightの<code>customCss</code>配列に追加します：
<div class="code-block-container"><div class="code-block-filename-container">astro.config.mjs</div><pre class="language-javascript"><code class="language-javascript code-line" data-line="33">import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
 integrations: [
 starlight({
 title: 'カスタムフォントを設定したドキュメント',
 customCss: [
 '@fontsource-variable/noto-sans-jp',
 ],
 }),
 ],
});
</code></pre></div><h2 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E9%81%A9%E7%94%A8" data-line="49" class="code-line"><a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E9%81%A9%E7%94%A8" aria-hidden="true"></a> フォントの適用</h2>
設定したフォントをサイトに適用するには、カスタムCSSファイルでフォント名を指定します。
<h3 id="%E5%85%A8%E4%BD%93%E3%81%AB%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" data-line="53" class="code-line"><a class="header-anchor-link" href="#%E5%85%A8%E4%BD%93%E3%81%AB%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" aria-hidden="true"></a> 全体に適用する場合</h3>
<div class="code-block-container"><pre class="language-css"><code class="language-css code-line" data-line="55">:root {
 --sl-font: 'Noto Sans JP Variable', serif;
}
</code></pre></div><h3 id="%E7%89%B9%E5%AE%9A%E3%81%AE%E8%A6%81%E7%B4%A0%E3%81%AB%E3%81%AE%E3%81%BF%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" data-line="61" class="code-line"><a class="header-anchor-link" href="#%E7%89%B9%E5%AE%9A%E3%81%AE%E8%A6%81%E7%B4%A0%E3%81%AB%E3%81%AE%E3%81%BF%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" aria-hidden="true"></a> 特定の要素にのみ適用する場合</h3>
<div class="code-block-container"><pre class="language-css"><code class="language-css code-line" data-line="63">main {
 font-family: 'Noto Sans JP Variable', serif;
}
</code></pre></div><h3 id="tailwind-css%E3%81%A7%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" data-line="69" class="code-line"><a class="header-anchor-link" href="#tailwind-css%E3%81%A7%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" aria-hidden="true"></a> Tailwind CSSで適用する場合</h3>
<code>tailwind.config.js</code>ファイルでフォントを設定します：
<div class="code-block-container"><div class="code-block-filename-container">tailwind.config.mjs</div><pre class="language-javascript"><code class="language-javascript code-line" data-line="72">
/** @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()],
};
</code></pre></div>

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