Amazonで商品を見るセール会場へ

Figmaでフォントが欠落する原因と対処法|インストール済みの場合も確認

Figmaで文字が見えていても、そのフォントで文字を編集できるとは限りません。「欠落しているフォント」が出たら、フォント名・スタイル・バージョン、ブラウザーと補助サービスの接続を確認します。元の見た目を保つ必要がある場合は、先に環境を揃え、代替フォントへの置換は最後に判断してください。

目次

最初に、欠落しているフォント名とスタイルを控える

対象のテキストを選択し、右サイドバーでフォント名とRegular・Boldなどのスタイルを確認します。現行の英語版公式ヘルプでは、左サイドバーの欠落フォントアイコンから、使用できないフォントとスタイルの一覧を開く方法が案内されています。画面の配置が掲載画像と違う場合は、対象文字の警告も確認してください。公式:欠落フォントの確認と置換

Figmaでテキストを打ち替えようとした際に表示される、欠落しているフォントの警告画面。
2024年撮影の参考画像。現在のUIとは配置・名称が異なる場合があります。

「フォントを持っている」だけでは確認が足りません。例えばファイルでBoldを使っているのに、PCにはRegularしか入っていなければ、必要なスタイルが不足しています。

状況確認すること進む先
フォント自体がPCにない正式な配布元から入手し、OSへインストールしたかフォントの追加
同じ名前があるのに欠落する必要なスタイルと版が一致しているかスタイル・バージョンの照合
ブラウザー版だけ使えないFont Installerの起動と接続状態補助サービスの確認
元のフォントを用意できない代替フォントでよいか、変更範囲は適切かバックアップ後の置換

フォントをOSへ追加し、Figmaで使える状態にする

Figmaが対応するフォントファイルはTTF・OTFです。ZIPをダウンロードしただけではなく、展開して必要なスタイルをOSにインストールします。Windowsではフォント設定、MacではFont Bookで追加したフォントを確認してください。

ブラウザー版でPC内の追加フォントを使う場合は、Figma公式のFont Installerも必要です。デスクトップアプリにはこの補助機能が含まれています。導入後は開いているデザインファイルを再読み込みします。フォント一覧の「Installed by you」で探すと、PCに追加したフォントを確認できます。公式:フォントを追加する

インストール済みなら、スタイルとバージョンを照合する

作成者と同じファミリー名でも、スタイルやバージョンが異なる場合があります。Windowsは「設定 → 個人用設定 → フォント」で対象を選び、MacはFont Bookの詳細から版を確認します。共同編集では、使用するフォントとスタイルの一覧を作成者に確認して揃えてください。

同名フォントが複数の供給元から利用可能になっている場合は、競合も確認します。Figmaのフォント一覧で対象の詳細を確認し、どのフォントを参照しているかを揃えます。置換やフォント削除を先に繰り返すと、元の版との比較が難しくなります。公式:競合するフォントの管理

ブラウザー版だけ使えない場合は、接続を確認する

Font Installerは起動用の画面を表示せず、バックグラウンドで動きます。現在の公式手順は、Figmaのメインメニューから「Preferences → Permissions and helpers」を開き、「Local network access」の状態を確認するものです。Blocked・Not connectedなら、補助サービスがブラウザーに接続できていません。表示された案内に従い、接続先と要求内容を確認してください。

Windowsではタスクマネージャーの詳細にfigma_agent.exe、MacではアクティビティモニタにFigmaAgentがあるか確認できます。動いていない場合は公式Font Installerまたはデスクトップアプリから起動し、ファイルを再読み込みします。公式:Font Installerの接続と起動の確認

元のフォントを用意できない場合に置換する

フォント置換は自分の画面だけに反映される操作ではありません。ファイル内の対象フォントを使う文字が変わり、共同作業者にも影響します。変更前の版を保存し、置換してよい範囲を確認してください。

  1. 欠落フォントの一覧を開きます。
  2. Replacement欄で、使用できる代替のファミリーとスタイルを選びます。
  3. 対象を確認して「Replace fonts」を実行します。
  4. 対象文字を編集し、警告・文字幅・改行・枠からのはみ出しを確認します。
代替フォントのプルダウンメニューを開き、候補一覧からフォントを探す操作画面。
2024年撮影の参考画像。現在のUIとは配置・名称が異なる場合があります。
検索ボックスにフォント名を入力して、目的のフォントを絞り込んで探す画面。
2024年撮影の参考画像。現在のUIとは配置・名称が異なる場合があります。
確認を行ったうえで、対象の代替フォントへの置換を実行する画面。
2024年撮影の参考画像。現在のUIとは配置・名称が異なる場合があります。
フォント置換後に文字幅や改行位置を確認し、テキストの打ち替え作業を行える状態になった画面。
2024年撮影の参考画像。現在のUIとは配置・名称が異なる場合があります。

置換後に字数が同じでも、文字幅や行数が変わることがあります。見出し、ボタン、表、スマホ用フレームを確認してください。置換を取り消す場合に備え、変更前の版を残します。

フォント以外で文字を編集できない場合

警告がなくても文字を変えられない場合は、閲覧権限、選択中のレイヤー、テキストスタイルを確認します。続きは文字を編集できないときの確認順へ。配布データを読み込んだ直後なら、.figファイルのインポートと編集前の確認も参照してください。

サービス

Service

デザイン制作に関心がありましたら、ぜひ詳細をご覧ください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Figmaのおすすめ書籍

Figma用PCの選び方

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次