DocusaurusにFontsourceで簡単にWebフォント(Noto Sans JP)追加したので、備忘録です。
<h2 id="%E3%81%AA%E3%81%9Cfontsource%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F" data-line="3" class="code-line"><a class="header-anchor-link" href="#%E3%81%AA%E3%81%9Cfontsource%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F" aria-hidden="true"></a> なぜFontsourceなのか？</h2>
FontsourceはNPMパッケージとしてWebフォントを管理できるサービスです。
<ul data-line="7" class="code-line">
<li data-line="7" class="code-line">簡単インストール: <code>npm install</code>一発で完了</li>
<li data-line="8" class="code-line">高パフォーマンス: 外部CDNへのリクエストが不要</li>
<li data-line="9" class="code-line">プライバシー保護: Googleなど外部サービスにデータを送信しない</li>
<li data-line="10" class="code-line">バージョン管理: package.jsonでフォントバージョンを管理</li>
</ul>
Astroとかでも使ってたので、意外とDocusaurusでやってる人少ないのかなと思い、記事にしました。
<h2 id="%E5%AE%9F%E8%A3%85%E6%89%8B%E9%A0%86" data-line="14" class="code-line"><a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 実装手順</h2>
<h3 id="%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="16" class="code-line"><a class="header-anchor-link" href="#%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> パッケージをインストール</h3>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="18">npm install @fontsource-variable/noto-sans-jp
</code></pre></div><h3 id="css%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF" data-line="22" class="code-line"><a class="header-anchor-link" href="#css%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF" aria-hidden="true"></a> CSSファイルでフォントを読み込み</h3>
<code>src/css/custom.css</code>の先頭に追加：
<div class="code-block-container"><pre class="language-css"><code class="language-css code-line" data-line="26">/* Noto Sans JP Variable を読み込み */
@import '@fontsource-variable/noto-sans-jp';

/* Docusaurusのデフォルトフォントを上書き */
:root {
 --ifm-font-family-base: 'Noto Sans JP Variable';
}
</code></pre></div>これだけで、サイト全体でNoto Sans JPが適用されます。
<h2 id="%E5%80%8B%E5%88%A5%E3%82%A6%E3%82%A7%E3%82%A4%E3%83%88%E3%82%92%E4%BD%BF%E3%81%84%E3%81%9F%E3%81%84%E5%A0%B4%E5%90%88%EF%BC%88%E8%BB%BD%E9%87%8F%E5%8C%96%EF%BC%89" data-line="38" class="code-line"><a class="header-anchor-link" href="#%E5%80%8B%E5%88%A5%E3%82%A6%E3%82%A7%E3%82%A4%E3%83%88%E3%82%92%E4%BD%BF%E3%81%84%E3%81%9F%E3%81%84%E5%A0%B4%E5%90%88%EF%BC%88%E8%BB%BD%E9%87%8F%E5%8C%96%EF%BC%89" aria-hidden="true"></a> 個別ウェイトを使いたい場合（軽量化）</h2>
軽量化したい場合はバリアブルフォントではなく、特定のウェイトのみを使いましょう。
下記の通りにインストールして、必要なウェイトだけを読み込みます。
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="44">npm install @fontsource/noto-sans-jp
</code></pre></div><div class="code-block-container"><pre class="language-css"><code class="language-css code-line" data-line="48">/* 必要なウェイトのみ読み込み */
@import '@fontsource/noto-sans-jp/400.css'; /* Regular */
@import '@fontsource/noto-sans-jp/700.css'; /* Bold */

:root {
 --ifm-font-family-base: 'Noto Sans JP';
}
</code></pre></div>これで読みやすい日本語ドキュメントサイトの完成です！

DocusaurusにWEBフォント(Noto Sans JP)をFontsourceで簡単に追加する