calendar

Docusaurusでフォントを変更する方法

category Software
tag Docusaurus tag サイトジェネレーター
toc目次

はじめに

Docusaurusで使用するフォントを変更する方法のメモです。

DocusaurusのCSS

DocusaurusではInfimaというCSS frameworkが使用されており、「--ifm-」というプレフィックスで始まるInfima変数を上書きすることでデフォルトの設定を変更することが可能です。

Docusaurusのフォント関連のInfima変数

Docusaurusのフォント関連のInfima変数は以下の通りです。

  • --ifm-font-family-base：サイトが使用する基本フォント
  • --ifm-font-family-monospace：サイトが使用する等幅フォント
  • --ifm-heading-font-family：見出しのフォント

デフォルトでは以下のように設定されています。

:root {
  --ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto,
    Ubuntu, Cantarell, Noto Sans, BlinkMacSystemFont,
    'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';

  --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  --ifm-heading-font-family: var(--ifm-font-family-base);
}

フォントの変更方法

Docusaurusの設定ファイル（docusaurus.config.js）のtheme.customCssに指定されているCSSファイル（デフォルト:./src/css/custom.css）でInfima変数を上書きすると設定が変更されます。

基本のフォントをメイリオ（Meiryo）にする場合は./src/css/custom.cssに以下を記述します。

:root {
  --ifm-font-family-base: Meiryo, sans-serif;
}

フォントの指定方法はCSSプロパティのfont-familyの指定方法と同じです。

参考