フォント

テキストレイヤーはモニターではなく、物理的なシルクスクリーン印刷として描画されます。そのため、テキストインスペクタのフォント一覧は「インストールされているものすべて」ではなく、シルクスクリーンのサイズと印刷公差で読みやすいものを選んだ、小さな キュレート済み のセットです。fonts.ts がそのリストの唯一の情報源です。

セルフホスト、CDN なし

キュレートされたフォントはいずれもバージョン固定された @fontsource/* パッケージで、fonts.ts の先頭で静的にインポートされます。

import '@fontsource/inter';
import '@fontsource/oswald';
import '@fontsource/bebas-neue';
import '@fontsource/orbitron';
import '@fontsource/rajdhani';
import '@fontsource/audiowide';
import '@fontsource/share-tech-mono';
import '@fontsource/archivo-black';
import '@fontsource/monoton';
import '@fontsource/press-start-2p';

これらは OFL ライセンスのフォントファイルで、アプリのビルドにバンドルされています。fonts.googleapis.com などのフォント CDN への実行時リクエストは一切ありません。これはオフライン利用のために重要であり、また、パネル設計ツールがテキストを描画するためだけにサードパーティのネットワーク呼び出しに依存すべきではないからです。

キュレート済みリスト

CURATED_FONTS は、テキストインスペクタのフォント <select> がレンダリングの元にする配列です。

共通しているのは、太い・幾何学的・等幅の書体であること、つまりシルクスクリーン工程で小さく細く印刷されても読みやすさを保つ書体です。繊細なセリフや細いウェイトのサンセリフは、一般的なパネルラベルのサイズではにじんだり完全に消えたりしてしまいます。

必要に応じたフェイスの読み込み

モジュールと一緒に eager に読み込まれるのは 定義（@font-face の CSS）だけです。実際のフォントファイルのバイト列は、初回使用時に ensureFont(family) を通じて遅延読み込みされます。

export function ensureFont(family: string): Promise<void>

ensureFont は family ごとに冪等です。document.fonts.load() を一度だけ起動し、進行中の Promise をキャッシュし、フェイスが実際に使える状態になった時点で解決します。呼び出し元は 2 か所です。

• テキストツール。新しいテキストレイヤーを置いた直後。

• テキストインスペクタ。ユーザーが選択中のレイヤーのフォントを変更したとき。

どちらの呼び出し元も .then(() => ctx.requestRepaint()) を連結するため、本物のグリフが用意でき次第、キャンバスがそれで再描画されます。それまでの間、レンダラーの ctx.font = ... はブラウザのフォールバックフェイスで描画しますが、これはエラーではなく正常で無害な一時状態です。

ensureFont は呼び出し元を例外で止めたりハングさせたりすることは決してありません。family の読み込みに失敗しても、あるいは実行環境に FontFaceSet API がまったくない場合（jsdom のデフォルトのテスト環境など）でも、Promise は解決します。ただ「ready」とマークされないだけで、呼び出しが何かをブロックする代わりに、フォールバックフェイスがそのまま描画され続けます。