Figmaでフォントが反映されないときの原因別対処法

Figmaでフォントが反映されないときは、まず「ローカルフォントがすべて出ない」「特定の書体や太さだけ使えない」「一部の文字だけ表示できない」を分けて確認します。最初から全フォントを置き換えたり、ブラウザのデータを消したりする必要はありません。原因に合った箇所を直し、元のレイアウトを保って作業を再開しましょう。

日本語の書体そのものを選び直す場合は、日本語フォントの選び方と表示確認も参考になります。ここでは、すでに採用しているフォントをFigmaで使える状態に戻す手順を中心に説明します。

第1部：フォントが反映されない原因を切り分ける

ブラウザからローカルフォントへアクセスする仕組みと、ファイルが必要としている書体の不足は別の問題です。たとえば、Regularは使えるのにBoldだけ使えない場合、接続全体を直すより先に、そのスタイルを確認するほうが問題を絞れます。

1. ブラウザ版とデスクトップ版を分けて確認する

Figmaの公式フォント追加手順では、ブラウザから追加のローカルフォントを使う場合にFont Agentを導入します。デスクトップ版にはその機能が含まれるため、別途導入する手順は不要です。Font Agentには開いて操作する画面がなく、バックグラウンドで動きます。トレイに設定アイコンが見つからないことだけで、動いていないと判断しないでください。

ブラウザ版でだけ問題が出るなら、同じ端末のデスクトップ版で同じファイルを開いて比較します。両方で同じスタイルが不足しているなら、フォントの導入状況に戻って調べます。ここで別のファイルを使うと、端末の違いとファイルの違いが混ざるため、比較条件をそろえるのが大切です。

2. ブラウザのサイト権限を確認する

Chromeでは、figma.comから端末内のアプリへのアクセスを許可していないと、インストール済みのローカルフォントが候補に出ないことがあります。Figmaのサイト権限に関する案内に沿って、アドレスバーからfigma.comのサイト設定を開きます。Chrome 145以降の英語表記は「Apps on device」、142〜144では「Local network access」です。

必要な権限を変更したら、デザインファイルを再読み込みして確認します。ブラウザ全体の保護機能を無効にする操作ではありません。会社が管理する端末で設定を変更できない場合は、権限名と対象サイトを管理者に伝えましょう。

3. ダウンロード済みとインストール済みを混同しない

ダウンロードフォルダにフォントファイルがあるだけでは、OSにインストールしたことにはなりません。Windowsのフォント設定やmacOSのFont Bookで、対象のファミリーとスタイルを確認します。必要なフォントは正規の配布元から入手し、OSの通常の手順で追加してください。原因がわからないまま、システムのフォントフォルダへ手動で移動する必要はありません。

静的フォントのパッケージでは、RegularとBoldが別ファイルの場合があります。一方、可変フォントでは複数の太さを一つのファイルに収録することもあります。「太さごとに必ず別ファイル」と決めつけず、手元の配布形式と、実際に選べるスタイルを確認します。

4. チームでは名前・太さ・バージョンを合わせる

MacとWindowsの違いを、保存先のパスだけで説明することはできません。同じファイルを編集する人が、その書体を利用できるかが重要です。Figmaの不足フォントの説明でも、未導入の書体、欠けたスタイル、バージョンの違いを確認しています。

たとえば、見出しだけがBoldのファイルで、相手はRegularしか使えないとします。このとき全体を別の書体へ置き換えると、問題のない本文まで変わってしまいます。まず不足している見出しのスタイルを特定し、同じものを使えるか確認します。フォントファイルを渡す前には、チーム内での利用・配布が許されているかも確かめます。

5. 置き換えは元の状態を残してから行う

元のフォントが使えない場合は、代替書体を選ぶことになります。ただし、共有ファイルでのフォント置換は自分の表示だけを変える操作ではありません。試す前にバージョンや複製を残し、変更する範囲を共同編集者と合わせます。

比較では、短い見出しだけでなく、折り返す本文、長いボタン名、数字を並べた表も使います。文字が表示されたら終わりではなく、行数、ラベルの切れ、ボタンの幅まで見ます。一文字だけの問題なら、その文字を含む最小のテキストを複製して試すと、元の画面全体を変えずに原因を探せます。

第2部：Pixsoでもフォントの利用条件をそろえる

Pixsoでは、画面を作りながら文字スタイルを整理し、チームでレビューできます。ただし、別のデザインツールに移れば、あらゆるフォントの不足が自動的になくなるわけではありません。ローカルフォントを使う場合は、PixsoのダウンロードページにあるFont Assistantを利用します。特定の日本語書体が全員の環境で使えることや、フォントの利用許諾まで保証するものではありません。

移行を検討するなら、普段使う画面を一つ取り込み、見出し・本文・ボタンの書体と折り返しを確かめましょう。続いて別の共同編集者にも同じテキストを開いてもらいます。画面全体を一度に移すより、実際の利用条件で一つの画面を確認したほうが、修正すべき箇所が明確になります。

Figmaの画面構成や基本操作を確認したい場合は、Figmaの使い方ガイドも参照できます。

元の文字組みを保って作業を再開する

すべてのローカルフォントが出ないなら接続とサイト権限、特定の書体だけなら名前・スタイル・バージョン、一部の文字だけなら収録文字を確認します。置換を行った場合は、元の画面との違いを残し、共同編集者にも変更内容を伝えましょう。

Pixsoで検討するときも、実際に使う文字列を画面へ配置するところから始めます。書体が選べることに加えて、読める大きさ、自然な改行、編集を続けられる環境までそろえることが大切です。

Pixsoで文字組みを確認する