Growiの表示フォントを、サーバー内に配置したカスタムフォント（kiloji）に変更するメモを記します。

BookStackと同じような方法でいけるかと思いましたが、Apacheの追加設定が必要でした。

環境(作業の前提条件)

  • Growi v7.3.0
    • Growiの実行ユーザはroot
  • Ubuntu 24.04
  • Apache 2.4によるリバースプロキシ
    • 結果的に、これが解決策でした。

さっくりとした手順

  1. フォントの配置(フォントはこちらを参考に)
  2. Webサーバの設定変更
  3. カスタムCSSの追加
  4. フォント変更確認

フォントファイルの配置

Webブラウザからアクセスできる公開ディレクトリに、使用したいフォントファイルを設置します。上記リンク先に示した「kiloji」を使います。

  • ディレクトリ移動
cd /path/to/growi/packages/preset-themes/public

/path/to/growiは自分の環境に合わせます。(筆者環境/home/www-data/growi)

  • フォント格納ディレクトリ作成
sudo mkdir -p ./fonts/kiloji
  • フォント格納

上記ディレクトリ(筆者例では/home/www-data/growi/fonts/kiloji)

にフォント一式を格納します。

Webサーバー（Apache）の設定ファイルを変更

この設定がハマった部分です。というのも、Growiの使用上、

https://【growi】/fonts/kiloji.wof

などにアクセスしても、アプリはURLとして解釈してしまうからです。

そのため、リバースプロキシで運用しているApacheのconfファイル/etc/apache2/sites-available/growi.confなどの修正を行います。

  • ファイルバックアップ
sudo cp -pi /etc/apache2/sites-available/growi.conf /path/to/backup/directory/growi.conf.$(date +%Y%m%d)
  • ファイルバックアップ確認
diff -u /path/to/backup/directory/growi.conf.$(date +%Y%m%d) /etc/apache2/sites-available/growi.conf

→ 差分がなければ（エラーが表示されなければ）バックアップ成功です。

  • ファイル編集

※編集前

FileETag None 

<FilesMatch "\.(js|css|png|jpg|gif|svg|woff2?)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

# リバースプロキシー設定
RewriteEngine on
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteRule /(.*) ws://localhost:3000/$1 [P,L]

ProxyPass        / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/

※編集後

これは、リバーズプロキシ設定の直情に記載します。

# (1) 静的ファイル（フォントなど）のキャッシュ設定
FileETag None
<FilesMatch "\.(js|css|png|jpg|gif|svg|woff2?)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

# (2) /fonts/ ディレクトリの場所をApacheに教える【重要：この部分を追加してください】
Alias "/fonts/" "/home/www-data/growi/packages/preset-themes/public/fonts/"
<Directory "/home/www-data/growi/packages/preset-themes/public/fonts/">
    Require all granted
</Directory>

# (3) /fonts/ へのアクセスはプロキシの対象から除外する
ProxyPass "/fonts/" "!"

※差分(以下のコマンドを発行して差分を確認)

-FileETag None 
-
+# (1) 静的ファイル（フォントなど）のキャッシュ設定
+FileETag None
 <FilesMatch "\.(js|css|png|jpg|gif|svg|woff2?)$">
     Header set Cache-Control "public, max-age=31536000, immutable"
 </FilesMatch>

+
+# (2) /fonts/ ディレクトリの場所をApacheに教える【重要：この部分を追加してください】
+Alias "/fonts/" "/home/www-data/growi/packages/preset-themes/public/fonts/"
+<Directory "/home/www-data/growi/packages/preset-themes/public/fonts/">
+    Require all granted
+</Directory>
+
+
+# (3) /fonts/ へのアクセスはプロキシの対象から除外する
+ProxyPass "/fonts/" "!"
+
 # リバースプロキシー設定
 RewriteEngine on
 RewriteCond %{HTTP:Upgrade} websocket [NC]
diff -u /path/to/backup/directory/growi.conf.$(date +%Y%m%d) /etc/apache2/sites-available/growi.conf

設定反映を確認します。

  • 構文確認
sudo apache2ctl configtest

Syntax OKを確認します。

  • サービス再起動
sudo systemctl restart apache2.service
  • サービス再起動確認
systemctl status apache2.service

active (running)を確認します。

GrowiのカスタムCSS設定

  1. Growiに管理者としてログインします。
  2. 「管理」>「カスタマイズ」を開きます。
  3. 「カスタムCSS」のテキストボックスに、以下のCSSコードを貼り付ける。 /* --- フォントの定義 --- */ @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'); } @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'); } /* --- フォントの適用 (アイコンを壊さない修正版) --- */ body, .growi, .page-main, .wiki, .sidebar-content, h1, h2, h3, h4, h5, h6, p, li, .btn, a, input, textarea { font-family: 'kiloji', sans-serif !important; } /* 基本の文字サイズを改めて指定 */ body { font-size: 16px; }
  4. ページ下部の更新ボタンを押し、設定を保存します。
  5. ブラウザでGrowiのページを開き、キャッシュをクリアして再読み込み（Ctrl + Shift + R）し、フォントが変わっていることを確認できれば作業完了です。

まとめ

今回、この手順がうまくいったのはひとえに「Apacheによるリバースプロキシ化」でした。

http://【growiサイト】:3000

のように、直接(Growiのような)nodeアプリに接続していたら、フォントファイルを透過させるかのようにアクセスさせることは難しかったでしょう。