こんにちは！プロダクトデザイナー、そしてフロントエンドエンジニアのあなたなら、一度はこんな絶望を味わったことがないでしょうか？
「チームでFigmaからオープンソースのオープンなプロトタイピングツール『Penpot』に移行したはいいが、ローカルでセルフホストした途端、愛用の日本語フォント（Noto Sans JPや社内専用フォント）が綺麗にレンダリングされない…」
「Docker環境のコンテナ内でフォントが迷子になり、豆腐（□）の文字化け祭り。挙句の果てにチームメンバーごとにデザインの見た目がズレる地獄絵図…」
クラウド全盛の時代にあえてDockerでPenpotをセルフホストし、データ主権を完全に掌握しようとする硬派なチームにとって、「フォントの壁」は最初の、そして最大の難所です。
大丈夫。今日は、世界最高峰のUI/UX環境を自らの手で構築するための「Penpotカスタムフォント完全攻略法」を、シームレスなデザインシステムの構築に定評のある僕が、どこよりも優しく、そして深く解説します。これをマスターすれば、あなたのチームのプロトタイピング環境は、最高に美しく、かつ強固なものに生まれ変わりますよ。
—
1. なぜPenpotのセルフホスト環境でフォントが「消える」のか？
まず、敵を知るためにアーキテクチャの構造を紐解きましょう。
FigmaなどのクラウドSaaSであれば、フォントの管理はすべて向こう側のクラウドサーバーがよしなにやってくれます。しかし、Docker等でPenpotをセルフホスト（オンプレミスやプライベートクラウド）した場合、システムは「あなた自身が用意したコンテナ内の環境」に依存します。
Penpotは主に以下の2つのレイヤーでフォントを認識しています。
1. バックエンド（Dockerコンテナ内OS）のフォントライブラリ: SVGのエクスポートやPDF生成、サーバーサイドのレンダリングで使用。
2. フロントエンド（ブラウザ）のフォントライブラリ: デザイナーがキャンバス上でタイポグラフィを操作し、プレビューするために使用。
この「2つの世界」の橋渡しを正しく行わないと、「デザイン画面では見えているのに、エクスポートすると文字化けする」あるいは「そもそもフォントピッカーに出てこない」という現象が起きます。
—
2. 基礎セットアップ：Docker環境へのカスタムフォントの流し込み
それでは、Docker Composeで立ち上げたPenpot環境に、独自の日本語フォント（例: `Noto Sans JP`）を確実に定着させる手順を追っていきましょう。
ステップ1: フォントファイルの準備
まず、適用したいフォントのWebフォントファイル（`.woff2` や `.ttf`）を用意します。今回は例として `NotoSansJP-VariableFont_wght.ttf` を使います。
プロジェクトのルートディレクトリ（`docker-compose.yml` がある場所）に、以下のようなディレクトリ構造を作ります。
my-penpot-project/
├── docker-compose.yml
└── fonts/
└── NotoSansJP-VariableFont_wght.ttf
ステップ2: Dockerfileによるフォントのコンテナ内インストール
Penpotのバックエンドコンテナ（通常は `penpot-backend` や `penpot-frontend` が関連します）の起動時に、ホスト側のフォントをコンテナ内のシステムフォントディレクトリにマウント、あるいはビルド時に焼き込みます。
もっともエレガントな方法は、ボリュームマウントを利用することです。`docker-compose.yml` を次のように書き換えてください。
version: ‘3.8’
services:
# 既存のPenpotサービス定義（抜粋・調整版）
penpot-frontend:
image: penpotapp/frontend:latest
ports:
- “3000:8080”
# フロントエンドコンテナにホストのフォントディレクトリを読み取り専用でマウント
volumes:
- ./fonts:/usr/share/fonts/custom-fonts:ro
# … その他の環境変数など
penpot-backend:
image: penpotapp/backend:latest
volumes:
- ./fonts:/usr/share/fonts/custom-fonts:ro
# 起動時にフォントキャッシュを更新するコマンドを挟むのがプロの技
command: >
sh -c “fc-cache -f -v && /opt/penpot/bin/penpot-backend”
> 💡 プロのワンポイントアドバイス
> コンテナ起動時に `fc-cache -f -v` を実行することで、Linuxカーネル（Fontconfig）に新しいフォントの存在を強制的に認識させます。これをサボると、サーバーサイドでの描画エンジンがフォントを見つけられず、豆腐化の原因になります。
—
3. Penpot設定画面からのフォント登録と「Hello World」的動作確認
Docker側の準備ができたら、いよいよPenpotのUI上からフォントを有効化します。
ステップ3: フォント設定のインポート
1. ブラウザからPenpotを開き、ワークスペース（チームまたはパーソナル）にアクセスします。
2. 「Team settings（チーム設定）」 または 「Admin settings（管理者設定）」 を開きます（※セルフホスト環境の管理者アカウントで行うのが確実です）。
3. 「Fonts（フォント）」 タブを選択します。
4. 「Add Font（フォントを追加）」をクリックし、先ほど配置したフォントファミリー名（例: `Noto Sans JP`）を入力し、ウェイト（Regular, Boldなど）ごとのファイルを紐付けます。
ステップ4: 精度高い「Hello World」的動作確認
正しく設定できているかをテストするための、いわば「タイポグラフィ版 Hello World」を試してみましょう。
1. 新規ファイルを作成し、テキストツールで日本語を入力します。
> テスト文字列：「あいうえお漢字 🚀 UI/UX Prototyping with Penpot」
2. フォントピッカーから、追加したカスタムフォント（Noto Sans JP）を選択します。
3. チェックポイント①（画面上の描画）:
ウェイト（太字や細字）を切り替えたとき、文字が滑らかにレンダリングされ、欧文と日本語のバランス（ベースライン）が崩れていないか確認します。
4. チェックポイント②（エクスポートの確認 – 最重要）:
フレームを選択し、PNGまたはSVG形式でエクスポートしてみてください。
もしここで文字化けしたり、フォントがデフォルトのサンセリフにフォールバックしていたら、ステップ2の `fc-cache` がうまく機能していません。
画像を開き、綺麗にベクターとして文字が描画されていれば、セルフホスト環境でのフォント設定は大成功です！
—
4. トラブルシューティング：現場でよくある「絶望の罠」と回避策
最後に、実務の現場で多くのエンジニア・デザイナーがハマりがちな罠と、その処方箋を共有しておきます。これを覚えておけば、いざという時に数時間のデバッグ地獄を回避できます。
トラブルA：チームメンバーの画面でフォントが適用されない（同期されない）
- 原因: Penpotのフォント設定は、サーバー側のストレージだけでなく、各クライアント（ブラウザ）のローカルストレージやCSSのロード状態にも依存します。
- 解決策:
チームメンバー全員に、一度ブラウザのハードリロード（`Ctrl + F5` または `Cmd + Shift + R`）を促してください。また、カスタムフォントのファイル名に日本語やスペースが含まれている場合、ブラウザが正しく解釈できないことがあります。フォントファイル名は必ず 半角英数とハイフン（例: `noto-sans-jp-regular.ttf`） にリネームしてから再アップロードしましょう。
トラブルB：SVGエクスポート時に文字の位置が微妙にズレる
- 原因: Dockerコンテナ内のLinux環境に、フォントのメトリクス（文字幅などの情報）を計算するためのライブラリ（`fontconfig` や `freetype`）が不足している場合に発生します。
- 解決策:
もしDockerイメージを自前でビルド（Dockerfileを使用）している場合は、明示的にパッケージを追加してください。
Dockerfileの例
FROM penpotapp/backend:latest
RUN apt-get update && apt-get install -y \
fontconfig \
libfreetype6 \
&& rm -rf /var/lib/apt/lists/
—
まとめ：制約をコントロールし、最高のデザイン基盤を手に入れよう
セルフホスト環境の構築は、時に孤独で泥臭い作業の連続です。しかし、フォントという細部にとことんこだわり、Dockerのコンテナ層からブラウザの描画層までを完璧にコントロール下に置いた時、あなたのチームのプロトタイピング環境は、SaaSの枠を超えた「最強の要塞」へと進化します。
「これをマスターすれば、毎日の作業が劇的に楽になりますよ」。
チーム全員の画面で、意図した通りの美しい日本語タイポグラフィが寸分の狂いもなく描画された瞬間、きっとエンジニアとしてもデザイナーとしても、たまらない達成感を覚えるはずです。
さあ、今すぐあなたのPenpot環境に最高のフォントを迎え入れ、次のプロダクトデザインを最高の手触りでスタートさせましょう！