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

「フォントをインストールしたのに Figma の一覧に出てこない」「使いたいフォントはどこからダウンロードすればいい？」「文字サイズをまとめて変えたいのに 1 つずつ直している」— Figma のフォントまわりで最初につまずくのは、だいたいこのあたりです。原因の多くは Figma の仕組みにあります。Figma で使うフォントの主役は、Figma ではなく OS 側にインストールしたものです（アカウントに直接アップロードする新しい経路もありますが、後述のとおり位置づけが違います）。フォントは決まったルートを通って Figma で使えるようになるので、そのルートさえ押さえれば迷いにくくなります。

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

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

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

この記事で得られること

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

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

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

ルート必要な作業向いているケース
1. Google Fontsなし（Figma に同梱）共有ファイル / チーム作業 / すぐ使いたいとき
2. ローカルフォントOS にインストール（ブラウザ版は + font installer）購入フォント / 配布フォント / システムフォント
3. Adobe Fonts有効な Adobe プラン + アクティベートCreative Cloud を契約中のチーム
4. アカウントにアップロードFigma の設定からフォントファイルを登録自分が開く / 編集する全ファイルで同じフォントを使いたいとき

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

📦 はじめる前に — 必要なもの

「フォントを入れたのに Figma に出てこない」の多くは、Figma に触る前、ファイルの段階で決まっています。先に 3 点を確認してください。

1. ファイル形式。 公式ヘルプは Figma が対応するのは .TTF と .OTF の 2 形式だけと明記しています1。.woff / .woff2（Web フォント）や .ttc（コレクション）は、同じ「フォント」でも使えません。配布元が Web 用の一式しか出していない場合は、デスクトップ用の配布物を探してください。

2. ZIP の展開。 フォントはほぼ ZIP で配布されます。必ず展開してからインストールしてください。圧縮フォルダの中から直接インストールすると、成功したように見えて反映されないのがよくある詰まり方です。

3. 使っている OS。 ⚠️ ChromeOS / Linux ではローカルフォントを使えません。 公式ヘルプは、Chromebook・Linux ユーザーが使えるのは Figma に既定で入っている Google Fonts と Apple のフォント（SF Pro / SF Compact）だけだと明記しています1。この 2 環境では、後述のインストール不要のルート（組織向け Custom Fonts を含む）が選択肢の 1 つではなく唯一の手段になります。

入手元が変わっても手順は変わらない

Google Fonts、有料フォントメーカー、マーケットプレイス、クライアント支給のブランドフォント — .ttf / .otf が手元にある時点から先の手順は同じです。入手元によって変わるのは守るべきライセンスであって作業手順ではありません。

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

最初に押さえたいのは、基本ルートでの「Figma にフォントをインストールする」= 「OS にフォントをインストールする」だということです。OS にインストールされたフォントを Figma が読みに行く、という関係になります（アカウントへ直接アップロードする別ルートは後述します）。

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

  1. フォントファイルをダウンロードする。 配布サイトやフォントメーカーから入手すると、通常 .ttf または .otf ファイル（ZIP に入っていることが多い）が手に入ります。公式ヘルプのとおり、Figma が対応するのは .TTF と .OTF の 2 形式だけです1。
  2. OS にインストールする。 ここが唯一 OS で手順が分かれる部分です（下記）。
  3. ZIP に複数ウェイト（Regular / Bold など）が入っている場合は、使うウェイトをまとめてインストールしておくと、Figma 側でウェイト切り替えができます。

macOS の場合

  1. ZIP を展開して .ttf / .otf ファイルを取り出す
  2. フォントファイルをダブルクリックする。プレビューが開き「フォントをインストール」ボタンが表示されます
  3. クリックするとフォントブックが検証します。ここでファイルの問題を指摘された場合、そのファイルは壊れているか非対応形式なので、強行せず配布元を見直してください
  4. ファミリーをまとめて入れるなら、全ファイルを選択して右クリック →「開く」でフォントブックが一括処理します
  5. Figma デスクトップアプリを再起動（ブラウザ版はタブを再読み込み）

💡 この方法で入るのは自分のユーザーアカウントのみです。1 台の Mac を複数人で使う場合は、フォントブックのサイドバーで **「ユーザー」ではなく「コンピュータ」**にインストールしてください。

Windows の場合

  1. ZIP を展開する。 ⚠️ Windows は圧縮フォルダの中からでもプレビューや「インストール」ができてしまいますが結果が不安定なので、必ず展開してから行ってください
  2. フォントファイルを右クリック →「インストール」。PC の全ユーザーで使うなら「すべてのユーザーに対してインストール」（管理者権限が必要）
  3. ファミリーをまとめて入れるなら、全ファイルを選択して右クリック →「インストール」
  4. または 設定 → 個人用設定 → フォント にファイルをドラッグしても入ります
  5. Figma デスクトップアプリを再起動（ブラウザ版はタブを再読み込み）

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

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

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

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

  • デスクトップ版: OS にインストールされたフォントを直接読み込みます。アプリを再起動すれば、フォント一覧に新しいフォントが現れます。
  • ブラウザ版: ブラウザ単体では PC のローカルフォントを読めません。Figma font installer（別称 FigmaAgent）をインストールする必要があります（Add a font to Figma1 にダウンロードリンクがあります）。導入後にタブを再読み込みすると、ローカルフォントが一覧に現れます。デスクトップアプリには最初から同梱されているため、この手順はブラウザ版だけのものです1。
  • 反映後にフォントを探すときは、右サイドバーのフォントメニューでフィルタを Installed by you に絞ると見つけやすくなります1。

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

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

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

ルート 4 — アカウントにフォントをアップロードする

組織プランでなくても、自分のアカウントにフォントファイルをアップロードする経路が用意されています。公式ヘルプの手順は アバター → Settings → Account → Your uploaded fonts → Upload fonts で、アップロードしたフォントは自分が閲覧・編集するどのファイルでも使えるようになり、フォントピッカーの Uploaded by you に並びます1。

⚠️ ただし「全員に配る」手段ではありません。 これはあくまで自分のアカウントに紐づく登録で、ファイルを共有した相手に自動で行き渡るのは Google Fonts と組織の Custom Fonts だけです。共有ファイルの安全な既定値がルート 1（Google Fonts）である点は変わりません。

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

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

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

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

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

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

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

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

  • 単一レイヤー: テキストレイヤーを選択し、右パネルの Typography（タイポグラフィ） セクションでサイズを指定。公式ヘルプも、フォントサイズを含む主要なテキストプロパティは右サイドバーの Typography セクションにあると説明しています4。テキストカーソルで一部だけ選択すれば、その範囲だけ変更できます。
  • 複数レイヤーをまとめて: Shift クリックやドラッグで複数のテキストレイヤーを選択すると、サイズ欄の変更が選択した全レイヤーに一括適用されます。「全体的に文字を大きくしたい」ときの最短手段です。
  • キーボードショートカット: テキスト選択中に Shift + Cmd + < / >（macOS）、Shift + Ctrl + < / >（Windows）でサイズを段階的に縮小 / 拡大できます（キーボード配列によって異なる場合があります）。
  • 同じフォントのレイヤーを一括修正: 正確な機能名は 編集 → 次のオプションですべて選択 → 同じフォントで選択（英語UI は Edit → Select all with → Select all with same font）です5。特定フォントを使う全レイヤーを選択してからサイズを一度で変更できます。⚠️ この選択は現在開いているページ内が対象なので、複数ページのファイルではページごとに繰り返す必要があります。

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

🔍 フォントが出てこない — 5 つの原因

インストールしたのに Figma に出てこない、というのは頻度の高いつまずき方なので、チェックリストとして分けておきます。当たりやすい順に並べてあります。

#原因いちばん速い確認方法
1そもそも OS に入っていないFigma ではなくフォントブック（Mac）/ 設定 → フォント（Windows）で検索する
2ブラウザ版で font installer が未導入デスクトップアプリでは出るのにブラウザで出ない → これ
3フォント名の不一致（XD 移行後に多い）ファイル内のファミリー名と、フォント一覧の名称を厳密に照合する
4共有ファイルで相手がフォントを持っていない自分では見えて相手では見えない = ローカルフォントのため
5フォントキャッシュのずれウィンドウを閉じるだけでなく完全に終了してから再起動する

⚠️ その前に、Figma を再起動しましたか。 Figma を開いたままインストールしたフォントは、デスクトップアプリの再起動（ブラウザ版はタブの再読み込み）まで反映されません。これだけでかなりの割合が解決します。

5 つの原因それぞれの詳しい切り分けと、5 分で原因を特定するフローは Figma でフォントが反映されない時の対処法 にまとめています。

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

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

  • フォントが Figma で使える状態（ローカルにインストール済み / Adobe Fonts でアクティベート済み / Google Fonts に存在）なら、テキストは元のファミリで表示されます。
  • 使えない状態なら、Figma は missing fonts として警告し、代替フォントに置き換えます。置換はメトリクス・ウェイト・改行位置をファイル全体で揺らします。公式ヘルプでは、左サイドバーの不足フォントアイコンから Missing fonts modal を開いて、不足しているフォントと影響を受けたレイヤーを一覧できると案内されています6。

実務での正しい順番は、先にフォントを Figma で使える状態にして、それからデザインを取り込むことです。この「何を先にやるか」は移行全体でも効いてくるので、まだ移行の段取りを決めていない段階なら XD → 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 つです。加えて、自分のアカウントにフォントをアップロードする経路もあり、こちらは Settings → Account → Your uploaded fonts から登録すると自分が開く全ファイルで使えます1（ただし共有相手には配布されません）。

Q: 自分が追加したフォントは、チームメンバーにも表示されますか？ 自動で共有されるのは Google Fonts と組織の Custom Fonts だけです。ローカルにインストールしたフォント、および自分のアカウントにアップロードしたフォントは自分の環境でしか表示されず、持っていないメンバーには missing fonts の警告と代替フォントが表示されます6。

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

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クリックで追加できます

なお本記事のうち Figma の仕様に関する記述は公式ドキュメントを出典として明記しています（記事末尾）。Pixel Fine Converter のフォント解決・ベースライン補正に関する記述は、いずれも自社のソースコードと実機検証にもとづく一次情報です。

出典

  1. Add a font to Figma — 対応形式 .TTF / .OTF、Figma font installer（FigmaAgent）がブラウザ版のみ必要でデスクトップ版には同梱されること、ChromeOS / Linux が追加フォント非対応であること、アカウントへフォントをアップロードする手順（Settings → Account → Your uploaded fonts）と Installed by you / Uploaded by you のフィルタ（2026-08-19 確認） ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8

  2. Upload custom fonts to an organization — Organization / Enterprise プラン限定、アップロード権限は組織管理者 / チーム管理者に限られること（2026-08-19 確認） ↩

  3. Access and troubleshoot missing Adobe fonts in Figma Design — Adobe Fonts を Figma で使う手順と、追加後にアプリ再起動 / タブ再読み込みが推奨されること（2026-08-19 確認） ↩

  4. Explore text properties — フォントサイズを含むテキストプロパティが右サイドバーの Typography セクションにあること（2026-08-19 確認） ↩

  5. Select layers and objects — 「Select all with」サブメニューの選択肢とメニュー経路（2026-08-19 確認） ↩ ↩2

  6. Missing font alert in Figma Design — 不足フォントアイコンと Missing fonts modal（2026-08-19 確認） ↩ ↩2

関連ページ