Figma でフォントが反映されない時の対処法 — 原因の切り分けと解決手順
「Figma でフォントを選んだのに反映されない」「他のメンバーには表示されているフォントが自分には反映されない」「インストール済みのフォントなのに Figma の選択肢に出てこない」— Figma を使い始めたばかりの方や、共同編集時によく聞く話です。
原因は 環境の違い（デスクトップ版 / Web 版 / OS / 共有プロジェクト）で異なり、それぞれ対処方法も違います。表面的な症状は同じでも、まずどこを確認すべきか が見えていれば、5 分以内に切り分けられるケースがほとんどです。
この記事では、「Figma でフォントが反映されない」5 つの主要原因と切り分け手順 を、実際に試す順序で整理します。
この記事で得られること
- フォントが反映されない症状の主要 5 パターンと、それぞれの対処手順
- デスクトップ版 / Web 版で異なる「Font Installer」の役割
- 共有プロジェクトで他のメンバーの環境にフォントがないケースの扱い方
- XD → Figma 移行直後にフォント名がずれる場合のチェックポイント
- 5 分で原因を切り分けるフロー
関連記事も合わせてどうぞ
この記事は Figma 本体でフォントが反映されない症状の対処法 にフォーカスしています。日本語フォントのベースライン / 行間描画精度 については 日本語テキスト完全性ガイド を、XD → Figma 移行全体のワークフロー は XD → Figma 移行 実践ガイド を参照してください。
📝 はじめに — 「フォントが反映されない」症状の正体
Figma で「フォントが反映されない」と感じる症状は、いくつかの異なる原因が混ざっています。代表的なパターンを並べると次の通りです。
- フォントセレクタを開いても、特定のフォントが選択肢に出てこない
- フォントを選択しても、テキストの見た目が変わらない
- 自分の画面では正しく表示されるが、他のメンバーには Missing fonts（フォント不足）として表示される
- XD から変換した直後、フォント名がずれてデフォルトフォントで表示される
- インストール直後で、Figma が新しいフォントを認識していない
これらは「Figma が壊れた」のではなく、Figma がフォントをどこから読み込むか という仕組みの違いから生じます。次のセクションで仕組みを 1 つだけ整理してから、5 つの原因に分けて見ていきます。
🔬 なぜ Figma でフォントが反映されないのか
Figma は基本的に クライアント側（自分の PC / ブラウザ）にインストールされているフォント を使ってテキストを描画します。サーバー側にフォントが保存されているわけではないため、
- OS にフォントが入っていない → Figma の選択肢に出てこない
- Web 版でブラウザがローカルフォントを読めない → Font Installer 経由でアクセスする必要がある
- 共有ファイルで他のメンバーの環境にフォントがない → そのメンバーには Missing fonts と表示される
という仕組み上の制約があります。逆に言えば、「自分の環境にフォントが正しく入っていて、Figma がそれを利用できる（パスが通っている）」 という 2 つを確認できれば、ほとんどのケースは解決します。
デスクトップ版と Web 版の違い
Figma の デスクトップアプリ（Mac / Windows）は、OS にインストールされたフォントを直接読み込める設計です。Web 版（ブラウザ）は、標準ではブラウザからローカルフォントへの直接アクセスが許可されていないため、Figma が提供する Figma font installer（FigmaAgent とも呼ばれるヘルパーアプリ、以下「Font Installer」）を経由してフォントにアクセスします。「フォントが反映されない」と感じたとき、まずデスクトップ版か Web 版かで対処手順が分岐します。
🔍 原因 1 — ローカルにフォントがインストールされていない
最も多いのが、そもそも OS にフォントがインストールされていない ケースです。デザインデータで指定されているフォント名が、自分の PC のフォント一覧に存在しないと、Figma は代替フォントで描画します。
症状の見え方
- フォントセレクタで検索しても候補に出てこない
- テキストレイヤを選択すると、フォント欄に “Missing fonts” 等の警告（赤いラベル / 警告アイコン）が表示される
- デザインの見た目が想定と異なる（線の太さ、字形が違う）
確認手順
- macOS なら Font Book、Windows なら 設定 → 個人用設定 → フォント で OS のフォント一覧を開く
- 反映されないフォント名を検索
- 一覧にない場合は OS にインストールされていない
対処
- フォント配布元（Google Fonts / Adobe Fonts / メーカー公式サイト等）からダウンロード → OS にインストール
- インストール後、Figma を再起動（デスクトップ版）または ブラウザをリロード（Web 版）
Adobe Fonts を使う場合
Adobe Fonts のフォントは、Adobe Creative Cloud アプリ経由で OS に同期される仕組みです。Adobe CC が起動していない / フォントを「アクティベート」していない場合、Figma 側からはフォントが見えません。Adobe CC を起動し、対象フォントが同期済みであることを確認してください。
🔍 原因 2 — Web 版で Font Installer が機能していない
Figma Web 版でだけ反映されない 場合、Font Installer の状態を疑います。
Font Installer とは
ブラウザは標準でローカルフォントへの直接アクセスを許可していないため、Figma は Font Installer という小さなヘルパーアプリを提供しています。これが OS とブラウザの橋渡し役となり、Figma Web 版が OS のフォント一覧を取得できるようになります。
症状の見え方
- デスクトップアプリでは反映されるが、Web 版でだけ反映されない
- フォントセレクタで「Local fonts not available」のような表示が出る
- インストール済みのフォントが Web 版だけで Missing になる
確認手順と対処
- Figma 公式ヘルプの「Font Installer」項目 から最新版をダウンロード
- 起動して常駐状態にする
- ブラウザをリロード → フォントが認識されるか確認
デスクトップ版に切り替える選択肢
Web 版でフォントの認識に手間取る場合、デスクトップアプリ（Mac / Windows）に切り替えてしまう のが最短です。デスクトップ版は OS のフォントを直接読み込むため、Font Installer のセットアップが不要です。
🔍 原因 3 — フォント名の表記揺れ（XD → Figma 移行時に多発）
XD など別のツールから Figma に変換したとき、フォント名が微妙にずれて Figma が認識できない ケースがあります。
症状の見え方
- 変換直後にフォント名が Missing fonts として表示される（赤いラベル / 警告アイコン）
- インストール済みのフォントなのに Figma が「ない」と判断する
- 例: XD では「Noto Sans JP」、Figma 側で期待しているのは「Noto Sans Japanese」
よくある表記揺れ
- スペース有無:
Noto Sans JP↔NotoSansJP - 言語名表記:
Noto Sans JP↔Noto Sans Japanese - ウェイト付き:
Noto Sans JP Boldを独立フォント名として扱う / Bold を style として扱う - 日本語名 / 英語名:
游ゴシック↔Yu Gothic、ヒラギノ角ゴ↔Hiragino Kaku Gothic（Adobe Fonts 等ではHiragino Sans表記）など
対処
- テキストレイヤを選択
- 右パネルのフォント欄でフォント名を確認
- 正しいフォント名で再指定（Figma の候補から選び直す）
- 同じファイル内で複数箇所を一括修正したい場合は、Missing fonts modal の Replace fonts で代替フォントへ置換するか、Figma Community のフォント置換プラグインを活用
Pixel Fine Converter のフォント関連補正
Pixel Fine Converter は XD → Figma 変換時に、フォントウェイト名の表記揺れ（Bold / SemiBold / Heavy 等の派生表記）を lookupWeightAlternatives で複数候補に展開し、Figma 側で最も近いウェイトを自動選択します。また、日本語フォント（Noto Sans JP / Noto Sans CJK JP / MS Gothic）については、ベースライン位置の メトリクス補正（FONT_CORRECTIONS）を適用しています。
なお、フォントファミリ名（family）自体の表記揺れ（例: Noto Sans JP ↔ Noto Sans Japanese）の自動正規化は行っていないため、必要に応じて変換後の Figma ファイル上でフォント名を確認 → 手動で再指定するフローになります。日本語フォントのベースライン補正の詳細は 日本語テキスト完全性ガイド を参照してください。
🔍 原因 4 — 共有ファイルで他者環境にフォントがない
「自分の環境では反映されているのに、共同編集している他のメンバーには Missing fonts と表示される」というケースです。
症状の見え方
- 自分: 正しいフォントで表示
- 他のメンバー: Missing fonts の警告 + 代替フォントで表示
- ファイルを開く度にフォントエラーが出る
仕組み
Figma は基本的に クライアント側（各メンバーの OS）にインストールされたフォント を使うため、デザイナーがローカルにしか持っていない有料フォントや市販フォントは、他のメンバーの環境では見えません。
対処の選択肢
| 選択肢 | 内容 | 適したケース |
|---|---|---|
| チーム全員に同じフォントをインストール | メンバー全員にフォントを配布 | 小さなチーム / OSS フォント |
| Custom Fonts（Organization / Enterprise プラン） | Figma の組織機能でカスタムフォントをチームに共有 | エンタープライズ / 有料プラン契約済み |
| Web フォントへ代替 | Google Fonts など全環境で利用可能なフォントに置き換える | OSS で運用したい場合 |
Custom Fonts の利用条件
Figma の Custom Fonts 機能（公式機能タイトル “Upload custom fonts to an organization”）は、Organization / Enterprise プラン で利用可能です（Starter / Professional プランでは利用不可）。利用条件・アップロード手順・対応フォーマットの最新情報は Figma 公式ヘルプの「Custom fonts」項目 を確認してください。
🔍 原因 5 — フォントキャッシュの不整合
フォントは確かにインストールされているのに反映されない、というケースの一部は キャッシュの不整合 が原因です。
症状の見え方
- 直前まで使えていたフォントが急に Missing になる
- 新しくインストールしたフォントが Figma 側に認識されない
- ファイルを開き直しても解消されない
対処手順（試す順）
- Figma を完全終了して再起動
- ブラウザのキャッシュをクリア（Web 版）
- OS のフォントキャッシュをリビルド（macOS:
atsutil databases -removeなどのコマンドが知られている、最新手順は OS のドキュメント参照） - Font Installer の再起動（Web 版で Font Installer 利用時）
- PC を再起動（最終手段だが確実）
OS のフォントキャッシュ操作は環境依存・破壊的な可能性があるため、まず Figma 再起動とブラウザキャッシュクリアから試す のが安全です。
🧭 切り分けフロー — 5 分でわかる対処手順
ここまでの 5 原因を、実際にどう切り分けるかをステップで整理します。
ステップ 1: デスクトップ版 / Web 版 どちらで起きているか？
- 🔴 Web 版でだけ起きる → 原因 2（Font Installer）を最優先
- 🟢 どちらでも起きる → 次のステップへ
ステップ 2: OS にそのフォントがインストールされているか？
- 🔴 入っていない → 原因 1（インストールから）
- 🟢 入っている → 次のステップへ
ステップ 3: XD から変換した直後 / 移行直後か？
- 🔴 Yes → 原因 3（フォント名の表記揺れ）を最優先
- 🟢 No → 次のステップへ
ステップ 4: 自分だけ / チーム共通で起きているか？
- 🔴 自分だけ → 原因 5（キャッシュ不整合）
- 🔴 チーム共通 → 原因 4（共有ファイルでの不在）
ステップ 5: すべて該当しない → Figma 公式ヘルプ + サポート問い合わせ
このフローで 90% 以上のケースは原因が特定できます。残りは Figma のアップデート直後の一時的な不具合か、特殊なフォント形式の問題のため、Figma 公式ヘルプの最新情報 を確認するのが確実です。
🎯 XD から移行した直後にフォントが反映されない場合
XD で作ったデザインを Figma に変換した直後に「フォントが反映されない」と感じることが、特によくあります。これは原因 3（表記揺れ）に加えて、
- XD と Figma でフォント名の正規化ルールが違う
- 日本語フォント特有の名前バリエーション（CJK 系の派生）
- ウェイト指定の扱いの差（Bold を独立フォントとするか、style として扱うか）
の 3 点が複合的に絡みます。
対処の優先順位
- テキストレイヤを選択 → フォント欄で実際の名前を確認
- OS にそのフォントがあるか確認（原因 1 のフロー）
- 正しいフォント名を Figma 側から選び直す
- 複数箇所で発生している場合は Missing fonts modal の Replace fonts、または Figma Community のフォント置換プラグインで一括修正
Pixel Fine Converter での対応
Pixel Fine Converter は変換時に ウェイト名の代替候補展開（lookupWeightAlternatives）と 日本語フォントのベースライン メトリクス補正（FONT_CORRECTIONS）で、ウェイト周りの表記揺れと描画ずれの一部を吸収します。具体的には:
- ウェイト名の代替候補展開（
Bold/SemiBold/Heavy等の派生表記から最も近いウェイトを自動選択） - 日本語フォント（Noto Sans JP / Noto Sans CJK JP / MS Gothic）のベースライン位置補正
ただし フォントファミリ名（family）自体の表記揺れ（Noto Sans JP ↔ Noto Sans Japanese 等）の自動正規化は実装していないため、変換後の Figma ファイル上でフォント名を確認 → 手動で再指定するフローが現実的です。
Free プランで日本語フォントのベースライン補正とウェイト代替候補展開を試せます。詳細は日本語テキスト完全性ガイドへ
💬 よくある質問
Q: Figma に Adobe Fonts のフォントが反映されません
A: Adobe Fonts のフォントは、Adobe Creative Cloud アプリ経由で OS に同期 される仕組みです。Adobe CC が起動していない、または対象フォントを「アクティベート」していない場合、Figma 側からはフォントが見えません。Adobe CC を起動し、フォントが同期済みであることを確認してから Figma を再起動してください。
Q: Figma Web 版でだけフォントが認識されません
A: Web 版は Figma Font Installer を経由してローカルフォントにアクセスします。Font Installer がインストール / 起動されているか確認してください。デスクトップ版に切り替えるのが最短の解決策です（→ 原因 2）。
Q: 共有ファイルでチームメンバーだけ Missing fonts が出ます
A: Figma は各メンバーのローカルフォントを使うため、デザイナーが個別に持っているフォントは他メンバーには見えません。チーム全員にフォントを配布 するか、Custom Fonts（Organization / Enterprise プラン） 機能の利用、または Google Fonts などの Web フォントへの置換 を検討してください（→ 原因 4）。
Q: XD から変換した日本語フォントが Missing と表示されます
A: 多くの場合、フォント名の表記揺れ（Noto Sans JP ↔ Noto Sans Japanese 等）が原因です。Figma 側でフォント名を確認し、正しい候補から選び直してください。Pixel Fine Converter はウェイト名の代替候補展開と日本語フォントのベースライン補正を行いますが、フォントファミリ名そのものの正規化は実装していないため、family 名の表記揺れは手動で再指定するフローが現実的です（→ 原因 3）。
Q: フォントを新しくインストールしたのに Figma が認識しません
A: Figma の キャッシュ が古い状態を保持している可能性があります。Figma を完全終了して再起動 → それでも解消しない場合は OS の再起動を試してください（→ 原因 5）。
✅ まとめ
Figma でフォントが反映されない症状の対処法を、5 つの原因と切り分けフローで整理しました。
記事のポイント
- 症状の正体 は「Figma がフォントをどこから読み込むか」の仕組みの違い
- 5 つの主要原因: ローカル不在 / Font Installer / 表記揺れ / 共有ファイル / キャッシュ
- 切り分けフロー: デスクトップ版か Web 版か → OS インストール確認 → 移行直後か → 自分だけかチーム全体か
- XD → Figma 移行直後 はフォント名の表記揺れが特に多発、Pixel Fine Converter の補正機構で軽減可能
- 解決しない場合 は Figma 公式ヘルプを参照（記事内で確証 70% 未満の手順は曖昧表現に留めています）
関連ページ
- 日本語テキスト完全性ガイド — 日本語フォント別のベースライン補正と描画精度
- Figma の日本語化 完全ガイド — UI の日本語化（フォントの話とは別軸）
- XD → Figma 移行 実践ガイド — 移行全体のプロセス
- XD ファイルを Figma で開く 3 つの方法 — 移行前の入り口