目次
DocusaurusにFontsourceで簡単にWebフォント(Noto Sans JP)追加したので、備忘録です。
なぜFontsourceなのか？
FontsourceはNPMパッケージとしてWebフォントを管理できるサービスです。
- 簡単インストール:
npm install一発で完了 - 高パフォーマンス: 外部CDNへのリクエストが不要
- プライバシー保護: Googleなど外部サービスにデータを送信しない
- バージョン管理: package.jsonでフォントバージョンを管理
Astroとかでも使ってたので、意外とDocusaurusでやってる人少ないのかなと思い、記事にしました。
実装手順
パッケージをインストール
npm install @fontsource-variable/noto-sans-jp
CSSファイルでフォントを読み込み
src/css/custom.cssの先頭に追加：
/* Noto Sans JP Variable を読み込み */
@import '@fontsource-variable/noto-sans-jp';
/* Docusaurusのデフォルトフォントを上書き */
:root {
--ifm-font-family-base: 'Noto Sans JP Variable';
}
これだけで、サイト全体でNoto Sans JPが適用されます。
個別ウェイトを使いたい場合（軽量化）
軽量化したい場合はバリアブルフォントではなく、特定のウェイトのみを使いましょう。
下記の通りにインストールして、必要なウェイトだけを読み込みます。
npm install @fontsource/noto-sans-jp
/* 必要なウェイトのみ読み込み */
@import '@fontsource/noto-sans-jp/400.css'; /* Regular */
@import '@fontsource/noto-sans-jp/700.css'; /* Bold */
:root {
--ifm-font-family-base: 'Noto Sans JP';
}
これで読みやすい日本語ドキュメントサイトの完成です！
