豆腐文字 (Tofu) とは

この記事は約 4 分で読めます。

□ という空白の四角が突然表示される現象。これが「豆腐文字 (tofu)」と呼ばれる、フォントが対応していない文字の表示方法です。画面に □ や ⌷ が並ぶと、何かのバグに見えますが、実際にはレンダリング側が「この文字を持っていません」と正直に伝える設計です。 絵文字や装飾文字でよく遭遇する現象で、対策を知っているとデザインや UI の判断が合理的になります。

定義

豆腐文字 (tofu) は、Unicode のコードポイントに対応するグリフをフォントが持っていない場合に、 代替として描画される空白の四角形やプレースホルダ図形のことです。技術的には OpenType などのフォント規格における 「.notdef glyph」(not defined glyph、定義されていないグリフ) の慣用的呼び名です。

「豆腐」という呼称は、見た目が豆腐のような白い四角に似ていることに由来し、Web 開発やタイポグラフィの分野で使われる俗称です。 Google のフォントファミリー「Noto」の名前も、豆腐をなくす (no more tofu) の意味だと説明されることがあります。

豆腐文字が出る原因

1. フォントが文字を持っていない

最も典型的な原因。Web ページの CSS で指定したフォントが、特定の Unicode コードポイントに対応するグリフを持たない場合、 ブラウザはフォールバックフォントを順に試し、それでも対応するグリフが見つからないと豆腐文字を表示します。

2. システムフォントが古い

絵文字は Unicode のバージョンごとに追加されてきたため、システムフォントが古い端末では、そのフォントより後に追加された絵文字のグリフを持たないことがあります。 古い Android や iOS、更新を止めた Windows では、この理由で絵文字が豆腐になるケースがあります。

3. フォント未指定のフォールバック失敗

CSS で font-family を 1 つだけ指定し、ジェネリック (sans-serif など) のフォールバックを書いていない場合、 OS が適切なフォントを推測できずに豆腐になることがあります。

4. 装飾文字 (Unicode 拡張領域)

絵文字アートでよく使われる 𓆩 𓆪 𖣘 ৎ などの装飾文字は、Unicode の補助多言語面などにあり、 標準フォントが持たないことが多い領域です。古い端末で豆腐化しやすい代表格です。

豆腐文字の見た目のバリエーション

対策

1. Web フォントで対応文字を確保

Google Fonts の Noto Color Emoji や Twemoji を Web フォントとして配信すると、ユーザー端末のフォントへの依存を減らせます (読み込みに失敗した場合は端末側のフォントに戻ります)。 ブランドが視覚的な一貫性を保ちたい場合に採られる方法です。

2. フォントスタックの工夫

CSS で複数のフォントを順に指定し、対応していない文字は次のフォントで補完されるようにします。

font-family: "Hiragino Sans", "Yu Gothic", "Noto Color Emoji", sans-serif;

3. 互換性の高い文字を選ぶ

絵文字アートでは、装飾文字を使う前に「広く対応されている記号 (⌒ ⊹ ✧ ☆) で代替できないか」を検討します。 どうしても凝った装飾を使いたいなら、対象オーディエンスの端末で表示されるか事前に確認します。

4. テキスト表示の代替

どうしても豆腐になる可能性が高い場合、JavaScript で対応していない文字を検出し、画像や代替テキストに置き換える戦略もあります。 実装コストは上がりますが、SNS のコメント欄を Web に埋め込むときなどに有効です。

実務での見え方

• 古い Android: 装飾文字 𓆩 𖣘 が豆腐になりやすい
• 古い Windows: 絵文字がモノクロまたは豆腐になることがある
• Linux 一部のディストロ: デフォルトフォントが絵文字非対応で豆腐化
• 古い iOS: 端末のフォントより後に追加された絵文字が豆腐になるケース

よくある誤解

• ❌ 「豆腐文字はバグ」→ ✅ 正常な「対応していない」シグナル
• ❌ 「フォントを変えれば解決する」→ ✅ そのフォントもグリフを持っている必要あり
• ❌ 「Web フォントを入れれば全端末で表示される」→ ✅ ブラウザによってはダウンロードを失敗する可能性がある

関連用語

• 絵文字 - 古い端末で豆腐化しやすい代表格
• Unicode - 豆腐文字が示す「対応外コードポイント」の概念基盤
• 絵文字アート - 装飾文字使用時に豆腐リスクを意識する場面