Figma にフォントをインストール・ダウンロードして使う方法 — 文字サイズの変更まで

「フォントをインストールしたのに Figma の一覧に出てこない」「使いたいフォントはどこからダウンロードすればいい？」「文字サイズをまとめて変えたいのに 1 つずつ直している」— Figma のフォントまわりで最初につまずくのは、だいたいこのあたりです。原因の多くは Figma の仕組みにあります。Figma には「フォントを読み込む」ボタンがありません。フォントは決まったルートを通って Figma で使えるようになるので、そのルートさえ押さえれば迷いにくくなります。

本記事では、フォントのダウンロード → OS へのインストール → Figma への反映 → インストール不要のルート（Google Fonts / Adobe Fonts）→ 文字サイズの変更 までを、作業の順番どおりに整理します。最後に、Adobe XD から移行したファイルでフォントが崩れる問題への備えもまとめました。

日本語フォントに特化した情報をお探しの方へ

本記事はフォント全般の導入手順を扱います。ヒラギノ・游ゴシック・Noto Sans JP など日本語フォント固有の選び方や「反映されない」問題の深掘りは、Figma の日本語フォント完全ガイド が詳しいです。導入の手順は本記事、日本語フォントの深掘りはあちら、という使い分けがおすすめです。

この記事で得られること

  • フォントを Figma で使えるようにする 3 つのルートと、自分のケースに合う選び方
  • ダウンロードしたフォントを OS にインストールして Figma に反映する具体的手順
  • ブラウザ版で必須になる Figma font installer の正体
  • 文字サイズを 1 レイヤーずつ直さずに変更する方法（複数選択・ショートカット・スタイル）
  • XD → Figma 移行でフォントが置き換わる原因と防ぎ方

🗺️ フォントを Figma で使えるようにする 3 つのルート

Figma で使えるフォントは、基本的に次のいずれかのルートを経由して利用可能になります。

ルート必要な作業向いているケース
1. Google Fontsなし（Figma に同梱）共有ファイル / チーム作業 / すぐ使いたいとき
2. ローカルフォントOS にインストール（ブラウザ版は + font installer）購入フォント / 配布フォント / システムフォント
3. Adobe Fonts有効な Adobe プラン + アクティベートCreative Cloud を契約中のチーム

このうち迷いが生まれるのはルート 2 です。「ダウンロードしたフォントを Figma でどう使うのか」— 次の 2 セクションで、ダウンロードから反映までを通しで追います。

💾 フォントをダウンロードして OS にインストールする

最初に押さえたいのは、「Figma にフォントをインストールする」= 「OS にフォントをインストールする」だということです。Figma 自体にフォントを取り込む操作はなく、OS にインストールされたフォントを Figma が読みに行きます。

ダウンロードしたフォントを使えるようにする手順:

  1. フォントファイルをダウンロードする。 配布サイトやフォントメーカーから入手すると、通常 .ttf または .otf ファイル（ZIP に入っていることが多い）が手に入ります。
  2. OS にインストールする。
    • macOS: フォントファイルをダブルクリックし、Font Book（フォントブック）で「インストール」を選択
    • Windows: フォントファイルを右クリックして「インストール」を選択（または 設定 → フォント にドラッグ）
  3. ZIP に複数ウェイト（Regular / Bold など）が入っている場合は、使うウェイトをまとめてインストールしておくと、Figma 側でウェイト切り替えができます。

ライセンスの確認はインストール前に

配布フォントには利用条件があります。商用利用の可否・アプリケーションへの埋め込み可否はフォントごとに異なるため、業務で使う場合はダウンロード元のライセンス表記を確認してからインストールしてください。

🔄 インストールしたフォントを Figma に反映する

OS へのインストールが済んだら、Figma に反映させます。ここでデスクトップ版とブラウザ版の違いが効いてきます。

  • デスクトップ版: OS にインストールされたフォントを直接読み込みます。アプリを再起動すれば、フォント一覧に新しいフォントが現れます。
  • ブラウザ版: ブラウザ単体では PC のローカルフォントを読めません。Figma font installer（別称 FigmaAgent）を Figma 公式の Downloads ページからインストールする必要があります。導入後にタブを再読み込みすると、ローカルフォントが一覧に現れます。

「インストールしたのに出てこない」の正体

この問題の原因は、ほとんどの場合「ブラウザ版で font installer が導入されていない」か「インストール後に Figma を再読み込みしていない」のどちらかです。手順は正しいのに表示されない場合は、Figma でフォントが反映されない時の対処法 で症状別に切り分けできます。

なお、会社全体でブランドフォントを共有したい場合、Figma には管理者がフォントをアップロードして組織全員に配布する Custom Fonts 機能（公式機能名 “Upload custom fonts to an organization”）があります。ただし Organization / Enterprise プラン限定（Starter / Professional では利用不可）のため、小規模チームでは「全員が同じフォントを各自インストールする」が現実的な代替になります。

🎁 インストール不要のルート — Google Fonts と Adobe Fonts

ダウンロードもインストールも不要なルートが 2 つあります。

Google Fonts（同梱・設定不要）。 Figma には Google Fonts のライブラリがプリセットで搭載されています。フォント一覧を開けば Noto Sans JP などがすでに並んでおり、そのまま選ぶだけです。最大の利点はファイルを開く全員に同じように表示されること — ブラウザ版でもデスクトップ版でも、OS が違っても描画が揃います。共有ファイルでは最も安全な選択肢です。

Adobe Fonts（Adobe プラン契約者向け）。 有効な Adobe プランがあれば、Creative Cloud でアクティベートしたフォントがローカルフォントと同じ扱いでシステムに登録され、Figma から使えます（ブラウザ版では font installer 経由）。XD 時代に Adobe Fonts でデザインしていた場合、同じフォントを Figma 移行前にアクティベートしておくと、移行後のフォント欠落をまとめて防げます。

🚀 XD 移行でもフォントを崩さない — Pixel Fine Converter

Free 版でもフォント解決とベースライン補正を含みます。ご自身のファイルで変換品質を確かめてから判断できます。

📏 Figma で文字サイズを変更する

フォントが使えるようになったら、日々の業務で最も発生頻度が高いのは文字サイズの変更です。1 つずつ直す以外の方法を知っておくと、作業時間が大きく変わります。

  • 単一レイヤー: テキストレイヤーを選択し、右パネルの Typography（タイポグラフィ） セクションでサイズを指定。テキストカーソルで一部だけ選択すれば、その範囲だけ変更できます。
  • 複数レイヤーをまとめて: Shift クリックやドラッグで複数のテキストレイヤーを選択すると、サイズ欄の変更が選択した全レイヤーに一括適用されます。「全体的に文字を大きくしたい」ときの最短手段です。
  • キーボードショートカット: テキスト選択中に Shift + Cmd + < / >（macOS）、Shift + Ctrl + < / >（Windows）でサイズを段階的に縮小 / 拡大できます（キーボード配列によって異なる場合があります）。
  • 同じフォントのレイヤーを一括修正: Edit メニューの「同じフォントのレイヤーをすべて選択」系の機能を使えば、特定フォントを使う全レイヤーを選択してからサイズを一度で変更できます。

繰り返し使うサイズはテキストスタイルに登録しておくと、スタイル側の変更が使用箇所すべてに反映され、以後の一括変更が仕組み化されます。サイズだけでなくフォント自体をファイル全体で置き換えたい場合は、Figma でフォントを一括変更する方法 が専用の手順をまとめています。

🔄 XD から移行したファイルのフォント

Adobe XD から移行したファイルでは、フォント管理にもう 1 点注意が必要です。XD の各テキストレイヤーはフォントを名前で参照しており、Figma 側でその参照が適切に解決される必要があります。

  • フォントが Figma で使える状態（ローカルにインストール済み / Adobe Fonts でアクティベート済み / Google Fonts に存在）なら、テキストは元のファミリで表示されます。
  • 使えない状態なら、Figma は missing fonts として警告し、代替フォントに置き換えます。置換はメトリクス・ウェイト・改行位置をファイル全体で揺らします。

実務での正しい順番は、先にフォントを Figma で使える状態にして、それからデザインを取り込むことです。日本語テキストでは置換の影響がさらに大きく、ベースラインのずれも加わります — 変換精度の検証は 日本語テキストはどこまで正確に変換できるか で詳しく説明しています。Pixel Fine Converter は XD ファイルを直接読み込み、変換の過程でフォント解決とベースライン補正を行うため、移行後のテキスト手直しを大きく減らせます。

💬 よくある質問

Q: フォントをインストールしたのに Figma に表示されません。 最も多い原因は、ブラウザ版で Figma font installer が未導入、またはインストール後に Figma を再読み込みしていないことです。font installer の導入（ブラウザ版）か再起動（デスクトップ版）の後、再読み込みしてください。それでも出ない場合は Figma でフォントが反映されない時の対処法 をご覧ください。

Q: PC にインストールせずにフォントを使う方法はありますか？ あります。Google Fonts（同梱・選ぶだけ）、Adobe Fonts（Adobe プラン契約者がアクティベート）、組織の Custom Fonts（Organization / Enterprise プランで管理者がアップロード）の 3 つです。

Q: 自分が追加したフォントは、チームメンバーにも表示されますか？ 自動で共有されるのは Google Fonts と組織の Custom Fonts だけです。ローカルにインストールしたフォントはそのフォントがインストールされているマシンでしか表示されず、インストールされていないメンバーには missing fonts の警告と代替フォントが表示されます。

Q: 文字サイズを複数のテキストでまとめて変更するには？ 複数のテキストレイヤーを選択してサイズ欄を一度変更するのが最短です。特定フォントの全レイヤーに適用したい場合は「同じフォントのレイヤーを選択」系の機能を併用してください。恒常的に管理するならテキストスタイル化が確実です。

Q: XD では正常だったフォントが、Figma 移行後に崩れました。 移行したレイヤーが参照するフォントが、Figma 側でまだ使える状態になっていないためです。先にフォントをインストール（または Adobe Fonts をアクティベート）してから取り込み直すか、変換過程でフォント解決を行う移行特化のコンバーターを使ってください。

🎯 まとめ

Figma のフォント追加は、ルートの選択とブラウザ版の 1 点だけ押さえれば迷いません。本記事の要点は次の 5 つです。

#ポイントやること
1迷ったら Google Fonts設定不要で全員に同じ描画 — 共有ファイルの安全な既定値
2インストール先は OSダウンロード → macOS / Windows にインストール → Figma を再読み込み
3ブラウザ版は font installer 必須未導入だとローカルフォントは一覧に現れない（FigmaAgent）
4サイズ変更は複数選択で複数レイヤー選択 + サイズ欄一括変更、恒常運用はテキストスタイル化
5移行はフォントが先XD デザインの取り込み前にフォントを使える状態へ — 置換は防ぐほうが安い

ルートさえ正しく選べば、Figma のフォント追加は「一度やれば終わる設定」になります。そしてファイルの出発点が Adobe XD なら、移行前にフォントの準備を入念に行うことが、変換を安全に進めるいちばんの近道です。

🚀 Pixel Fine Converter を Figma Community からインストール

Figma Communityから1クリックで追加できます

関連ページ