はじめに
Web アプリやゲーム、業務システムなどで独自フォントを採用するとき、
「この文字列は本当にフォントに含まれているのか？」を瞬時に確かめたい場面が意外と多くあります。
既存ツールを探してみても
- 手元にインストールしなければ動かない
- コマンドライン専用で非エンジニアには扱いづらい
- そもそも Unicode の追加面（第3・第4水準、拡張絵文字など）までカバーしきれない
──といったケースがほとんどでした。
そこでブラウザだけで完結するオンラインチェッカーを自作し、公開してみました。
どんなサイト？
コンセプト
- フォントをドラッグ＆ドロップ or ファイル選択する
- テキストを貼り付けるだけ
- 未収録文字があればその場でリストアップ
「とにかく速く・カジュアルに確認したい」という一点に全振りしています。
開発中の UI スクリーンやマニュアル原稿を Ctrl + A → Ctrl + C → チェッカーに Ctrl + V
──これだけで代用フォント（tofu）ゼロの世界を保証できます。
※本サービスの利用により発生したいかなる損害についても、当方は一切の責任を負いかねますのでご了承ください。
対応フォーマット
- TTF / OTF / WOFF / WOFF2
（※ WOFF2 の場合は内部で自動展開して解析します）
主な機能
| 機能 | 詳細 |
|---|---|
| コードポイント完全解析 | opentype.js で cmap テーブルを直接走査し、Unicode ⇄ グリフを正確にマッピング |
| 動的 fallback 判定 | パース不能フォントでも Canvas 幅比較 + FontFaceSet.check() に自動スイッチ |
| ZWJ / VS 対応 |
Intl.Segmenter('grapheme') で拡張書記素クラスタ単位に分割。複合絵文字や結合文字も 1 まとまりで判定 |
| 軽量・依存ゼロ | ライブラリ読み込みは CDN 1 本のみ。ビルドもサーバーも不要 |
使い方ガイド
-
フォントをアップロード
ページ上部のファイル選択ボタン、またはドラッグ＆ドロップでフォントを読み込むと、
右上のステータスが
`「NotoSansCJKjp-Medium.otf」を読み込みました（opentype 解析中…）のように表示されます。 -
テキストを貼り付ける／直接入力する
フォントに含まれない文字だけが赤文字リストに並びます。
例：🧑🤝🧑や𠮟（U+20B9F）など。 -
結果をチェック
未収録文字が 0 件なら 「安心して本番リリースできる文字列！」 というわけです。
Tips
- フォントを読み替えた瞬間に入力欄が解放されない場合はブラウザのキャッシュが原因のことも。Ctrl + F5 で再読み込みすると直ることがあります。
- モバイル Safari ではユーザーフォント読み込みが制限され、正しく解析できない可能性があります。PC ブラウザ推奨です。
代用文字を使いたくない理由
- 同じテキストでも 環境依存で字形が変わる
- 可読性・デザイン整合性が崩れやすい
- 法的書類・組版では 想定外の字形が混ざると致命的
だからこそ「フォントに含まれていない文字を事前に洗い出す」ことは、
UX だけでなく品質保証の観点でも大きな意味があります。
おわりに
独自フォントを採用している開発現場 の「痒い所」に刺さるツールになれば幸いです。
不具合報告や機能リクエストは大歓迎！
URL 再掲
https://uni928.github.io/StringChecker/index2.html
最後までお読みいただきありがとうございました。
皆さんの制作現場で、“代用文字ゼロ” を実現する手助けになれば嬉しいです。
再掲：
※本サービスの利用により発生したいかなる損害についても、当方は一切の責任を負いかねますのでご了承ください。
追記
この文章は ChatGPT で添削しています。
生成 AI の添削が苦手な方は申し訳ありません。