BookStackの表示フォントを、サーバー内に配置したカスタムフォント（kiloji）に変更したときのメモです。

これには2つの目的があります。

  • 見た目を変えて独自性を出す。
  • サーバ内にあるフォントを指定することで読み込み速度を大幅に上げる。

環境

  • BookStack v25.07.2
  • PHP 8.3
  • MySQL 8
  • Apache 2.4
    • Apacheの実行ユーザはwww-data

さっくりとした手順

  1. カスタムフォントを用意します。
  2. BookStackのpublicフォルダにフォントファイルを格納します。
  3. カスタムCSSを設定します。
  4. 設定を確認します。

カスタムフォントを用意します。

今回用いたのは手書きボールペンのようなフォント、きろ字。（フリーで使えるフォントです）

公式サイトからフォントファイル一式をダウンロードします。

使うフォントファイルは

  • kiroji.ttf
  • kiroji.woff
  • kiroji.woff2
  • kiroji_b.ttf
  • kiroji_b.woff
  • kiroji_b.woff2

となっています。ダウンロード後、サーバの適当な位置に格納します。

BookStackのファイルにフォントを格納します。

  • BookStackのpublicディレクトリに移動
cd /path/to/bookstack/public && pwd

自分の環境に合わせます。(筆者環境 /home/www-data/BookStack/public)

  • fontsディレクトリを作成します。
sudo -u www-data mkdir -p fonts/kiloji
  • フォントファイルの格納
sudo -u www-data cp -pi /path/to/fonts/directory/kiroji*woff2 /path/to/bookstack/public/fonts/kiloji/
  • フォントファイルの格納確認
ls -l /path/to/bookstack/public/fonts/kiloji/

追加したフォントがあることを確認します。

カスタムCSSを修正します。

ブラウザでBookStackにアクセスし、管理者権限でログインします。

設定＞カスタマイズに移動します。

「カスタムheadタグ」のテキストボックスに、以下のCSSコードを貼り付けます。

<style>
/* --- フォントの定義 --- */

/* 1. 通常の太さのフォントを 'kiloji' として定義 */
@font-face {
  font-family: 'kiloji';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/kiloji/kiloji.woff2') format('woff2'),
       url('/fonts/kiloji/kiloji.woff') format('woff'),
       url('/fonts/kiloji/kiloji.ttf') format('truetype');
}

/* 2. 太字用のフォントを、同じ 'kiloji' という名前で定義 */
@font-face {
  font-family: 'kiloji';
  font-style: normal;
  font-weight: bold;
  src: url('/fonts/kiloji/kiloji_b.woff2') format('woff2'),
       url('/fonts/kiloji/kiloji_b.woff') format('woff'),
       url('/fonts/kiloji/kiloji_b.ttf') format('truetype');
}

/* --- フォントの適用 --- */

/* 1. ページ全体の基準となる文字サイズとフォントを指定 */
body {
  font-family: 'kiloji', sans-serif !important;
  font-size: 16px; /* ← この数値で大きさを調整 */
}

/* 2. 見出しやナビゲーションなど、個別にフォントが指定されている箇所にも適用 */
h1, h2, h3, h4, h5, h6, .btn, a, input, textarea,
.page-nav, .sidebar-page-nav a, .tri-layout-container, .chapter-contents, .book-contents a {
  font-family: 'kiloji', sans-serif !important;
}
</style>

適用後、ページ下部の「設定を保存」ボタンをクリックします。

設定変更確認

BookStackにアクセスし、指定したフォントに替わっていたら設定変更です。

補足：最初の試行（一部のみフォントが変わったCSS）

以下は、bodyタグにのみフォントを指定した最初のコードです。見出しなど、個別にCSSが設定されている要素には適用されませんでした。

<style>
@font-face {
  font-family: 'kiloji';
  font-style: normal;
  font-weight: normal; 
  src: url('/fonts/kiloji/kiloji.woff2') format('woff2');
}
@font-face {
  font-family: 'kiloji';
  font-style: normal;
  font-weight: bold; 
  src: url('/fonts/kiloji/kiloji_b.woff2') format('woff2');
}
body {
  font-family: 'kiloji', sans-serif !important;
}
</style>