PR|3日で初案件

Figma Google Fontsを5ステップで導入|反映されない時の全対処法

◆ ◆ ◆

Homeフリーランスの仕事術 › Figma Google Fontsを5ステッ...

FREELANCE CAREER GUIDE
フリーランスの仕事術
Figma Google Fontsを5ステップで導入|反映されない時の全対処法
フリ転。

FigmaでGoogle Fontsを使うには、フォントをOSにインストールするだけで即日対応できます。ブラウザ版ではFont Installerの追加が必要ですが、5ステップで完了します。導入手順からフォント未反映の解決策まで、この記事で一気に解決してください。

目次

この記事でわかること

この記事に関連するツール

文字サイズ換算ツール

級数・pt・px・remを相互換算できます

この記事を読むと、次の3点が明確になります。デスクトップ版・ブラウザ版それぞれの最短導入手順、フォントが反映されない5つの原因と対処法、商用利用の可否を判定する4つの条件。

今のデザインの仕事で、一番近い悩みは?

この記事の結論

FigmaでGoogle Fontsを使う最速ルートは「Google Fontsからダウンロード→OSにインストール→Figmaを再起動」の3ステップです。ブラウザ版を使う場合のみ、Figma Font Installerを先に導入してください。フォントが反映されない原因の多くはキャッシュとFont Installer未導入なので、この2点を確認するだけで大半は解決します。

▶ 今すぐやること: Google Fontsを開き、使いたいフォントを1つ選んで「Download family」をクリックする(3分)

状況別ショートカット

状況読むべきセクション所要時間
デスクトップ版でフォントを追加したいFigma Google Fontsは3ステップで導入完了5分
ブラウザ版でフォントが使えないブラウザ版Figmaは4手順でFont Installerを適用10分
フォントがFigmaに表示されないフォント未反映は5パターンで原因を特定5分
日本語フォントを選びたい日本語デザインはNoto Sans JPを第一候補に選ぶ3分
商用利用の可否を確認したいFigma Google Fontsの商用利用は4条件で判定3分

Figma Google Fontsは3ステップで導入完了

デスクトップ版Figmaを前提に、最短ルートを解説します。「どこから始めればいい?」と迷う必要はありません。3つの操作で完了します。

FigmaのデフォルトフォントはGoogle Fontsを含む

Figmaのデザインファイルには、デフォルトで主要なGoogle Fontsが含まれています(Figmaデザインへのフォントの追加|Figma Help Center)。Open SansやRobotoといった定番フォントはFigmaを起動した時点から選択可能です。フォントメニューを開いてすでに表示されている場合は、追加作業なしでそのまま使えます。

Figmaのデフォルト収録に含まれていない新しいGoogle Fontsや独自フォントを使う場合は、OSへのインストールが必要です。「Figmaにフォントを追加する=OSにインストールする」と理解しておくと混乱しません。なお、日本語フォントの商用利用可否の判定方法については別途確認しておくと安心です。

Google FontsからフォントをダウンロードするSTEP1

Google Fontsにアクセスし、使いたいフォントを検索します。フォントのページを開いたら、右上の「Download family」または「Get font」ボタンをクリックしてください。ZIPファイルがダウンロードされます。

ZIPを解凍すると、.ttfまたは.otf形式のファイルが含まれています。日本語フォントの場合は複数のウェイト(Regular、Bold、Light等)がまとめて入っていることが多いため、必要なウェイトだけを選んでもかまいません。クライアント案件では後から追加が必要になるケースを防ぐため、ファミリー全体をまとめてダウンロードしておくことをおすすめします。

フォントをOSにインストールするSTEP2とSTEP3

Macの場合は、ダウンロードしたフォントファイルをダブルクリックすると「Font Book」が起動します。「フォントをインストール」をクリックすれば完了です。Windowsの場合は、フォントファイルを右クリックして「インストール」または「全ユーザー用にインストール」を選択してください。「全ユーザー用」を選ぶと管理者権限でインストールされ、ソフトウェア間の認識トラブルが減ります。

インストール後はFigmaを完全に終了して再起動してください。再起動せずにフォントメニューを確認しても表示されないケースが多いため、この手順は省略しないでください。フォントメニューの検索欄にインストールしたフォント名を入力して一覧に表示されれば導入完了です。

CHECK

▶ 今すぐやること: Google FontsでダウンロードしたいフォントをZIP保存し、OSにインストールしてFigmaを再起動する(5分)

Q: デスクトップ版Figmaでフォントをインストールしたのに表示されません。なぜですか?

A: Figmaを完全に終了して再起動する操作が抜けているケースが最も多いです。再起動後もフォントが表示されない場合は、後述の「フォント未反映は5パターンで原因を特定」セクションを参照してください。

Q: Google FontsのすべてのフォントがデフォルトでFigmaに入っていますか?

A: いいえ、すべてではありません。Figmaには主要なGoogle Fontsがデフォルト収録されていますが、新しく追加されたフォントや一部のフォントはOSへのインストールが必要です。

ブラウザ版Figmaは4手順でFont Installerを適用

ブラウザ版FigmaはデスクトップFigma版と手順が異なります。ブラウザ版では、OSにインストールしたフォントを読み込むための「橋渡し」となるFigma Font Installerが必要です。

Figma Font InstallerとFigma Agentの違い

Figma Font Installerは以前「Figma Agent」と呼ばれていたアプリです。現在は名称がFont Installerに統一されており、公式ヘルプでもFigma Font Installerと記載されています(Figmaデザインへのフォントの追加|Figma Help Center)。古い解説記事では「Figma Agent」と記載されていることがありますが、同一のツールを指しています。

Font Installerのダウンロードとインストール手順

ブラウザ版Figmaを開いた状態でテキストを選択するか、新しくテキストを追加するとフォント選択パネルが右サイドバーに表示されます。パネル内に「Font Installerを入手」または「ローカルフォントを有効にする」旨のリンクが表示されているので、そこからダウンロードページへ移動できます。あるいはFigmaの公式ヘルプページから直接ダウンロードしてください。

ダウンロードしたインストーラーを実行し、インストールを完了します。Macの場合はアプリをApplicationsフォルダに移動後に起動してください。インストール後はバックグラウンドで常駐し、Figmaとローカルフォントの通信を担います。タスクバーまたはメニューバーにFont Installerのアイコンが表示されていれば正常に起動しています。

Font Installer導入後の確認手順

Font Installerを起動した後、ブラウザ上のFigmaファイルを再読み込み(Ctrl+R または Command+R)してください。この再読み込みを行わないとFont Installerが認識されません。再読み込み後にフォントメニューを開き、OSにインストールしたフォントが表示されていれば設定完了です。

PCを再起動したらFont Installerを先に立ち上げてからFigmaを開く習慣をつけると、毎回「フォントが消えた」と悩む時間がなくなります。Font InstallerはFigmaを使うたびに起動している必要があります。

CHECK

▶ 今すぐやること: ブラウザ版Figmaを使っている場合は、Figma Font Installerを公式ヘルプページからダウンロードして起動し、Figmaファイルを再読み込みする(10分)

Q: Font Installerを入れたのにフォントが表示されません。

A: Font Installerを起動した後にFigmaのファイルを再読み込みしているか確認してください。再読み込みなしでは認識されません。それでも表示されない場合は、次の「フォント未反映は5パターンで原因を特定」を参照してください。

Q: Font InstallerはMacとWindowsどちらでも使えますか?

A: はい、Mac・Windows両方に対応しています。公式ヘルプページからOSに合ったインストーラーをダウンロードしてください。

フォント導入は自分に合う方法を3分で判定

フォントが使えない原因は状況によって異なります。以下の質問に答えると、取るべき対応が明確になります。

Q1: 今使っているのはデスクトップ版Figmaですか?それともブラウザ版ですか?

デスクトップ版の場合 → Q2へ進んでください。

ブラウザ版の場合 → Q3へ進んでください。

Q2: フォントをOSにインストールした後、Figmaを完全に終了して再起動しましたか?

再起動した → Result A(フォントが見つからない場合は「フォント未反映は5パターンで原因を特定」へ)

再起動していない → 今すぐFigmaを完全終了して再起動してください。

Q3: Figma Font Installerをインストールして、現在起動していますか?

起動している → Q4へ進んでください。

インストールしていない、または起動していない → 「ブラウザ版Figmaは4手順でFont Installerを適用」を参照してください。

Q4: Font Installer起動後にFigmaファイルを再読み込みしましたか?

再読み込みした → Result B

再読み込みしていない → ブラウザでCtrl+R(Mac: Command+R)を実行してください。

Result A(デスクトップ版・再起動済み): フォントメニューで検索しても見つからない場合は、フォントが正常にインストールされていない可能性があります。「フォント未反映は5パターンで原因を特定」セクションへ進んでください。

Result B(ブラウザ版・Font Installer起動済み・再読み込み済み): フォントが表示されている場合は設定完了です。表示されていない場合は、キャッシュ削除を試してください(「フォント未反映は5パターンで原因を特定」参照)。

CHECK

▶ 今すぐやること: 上記Q1の質問に答えて、自分の状況に対応する手順を今すぐ実行する(3分)

Q: デスクトップ版とブラウザ版でどちらがフォント管理が楽ですか?

A: フォント管理だけを考えると、デスクトップ版のほうが手順が少なくトラブルも起きにくいです。Font Installerの起動忘れが発生しないため、複数の案件を並行管理する場面ではデスクトップ版をおすすめします。

Q: デスクトップ版とブラウザ版を切り替えて使えますか?

A: はい、同じアカウントでどちらも使えます。ブラウザ版を使う場合はその都度Font Installerが起動していることを確認してください。

フォント未反映は5パターンで原因を特定

フォントをインストールしたのにFigmaで表示されない問題は、現場でも頻繁に起きます(Figmaウェブ版でフォントが反映されない・消えた!?|kasoudesign)。原因のほとんどは「操作の抜け漏れ」か「ブラウザの干渉」です。5パターンの原因と対処法を順番に確認してください。

パターン1:Figmaの再起動・再読み込み不足

デスクトップ版ではFigmaを完全に終了して再起動、ブラウザ版ではファイルを再読み込みしないとフォントは認識されません。「終了した気がする」状態でバックグラウンドに残っていることもあるため、タスクマネージャー(Windows)またはアクティビティモニタ(Mac)でFigmaが完全に終了していることを確認してから再起動してください。

パターン2:ブラウザキャッシュの干渉

ブラウザ版でフォントが表示されない時の2番目に多い原因がキャッシュです。キャッシュには古いフォント情報が残り、新しいフォントの認識を妨げます。Chrome・Edgeではアドレスバーに chrome://settings/clearBrowserData と入力し、「キャッシュされた画像とファイル」を対象に「全期間」でクリアしてください。キャッシュ削除後は必ずFigmaファイルを再読み込みしてください。

キャッシュ削除と再読み込みを省いてFigmaのフォントメニューだけを開き直す操作では変化が起きません。フォントの認識はファイルの読み込み時点で行われるため、ファイル自体を再読み込みすることが必要です。

パターン3:ブラウザ拡張機能の干渉

広告ブロッカーやセキュリティ系の拡張機能がFont InstallerとFigmaの通信を遮断するケースがあります。シークレットモード(ChromeではCtrl+Shift+N、MacではCommand+Shift+N)でFigmaを開き、フォントが表示されるかを確認してください。シークレットモードでは拡張機能が無効になるため、表示されればいずれかの拡張機能が原因と判断できます。なお、作業効率に影響するChrome拡張機能の選び方についても参考にしてください。

原因を特定するには拡張機能を1つずつ無効化して再確認します。この手順を省いて「Figmaの不具合」と思い込むと解決が遅れます。

パターン4:Font Installerが起動していない

ブラウザ版でFigmaを開くたびにフォントが消える場合、Font InstallerがPC起動時に自動起動する設定になっていない可能性があります。Font Installerの設定でログイン時の自動起動をオンにしてください。MacではシステムEnvironment→ログイン項目、WindowsではタスクマネージャーのスタートアップタブからFont Installerを有効化できます。

ブラウザ版で毎回フォントが消える問題も、Font Installerを自動起動に設定することで解決したケースが報告されています(figmaブラウザ版でフリーフォントを使う方法|note)。

パターン5:フォントが正常にインストールされていない

フォントファイルを解凍せずにZIPのまま実行しようとした場合や、インストール時にエラーが出た場合は、フォントが正常にインストールされていません。OSのフォント管理アプリ(MacはFont Book、Windowsは設定→個人用設定→フォント)でインストール済みフォント一覧を確認し、対象フォントが一覧に表示されているかを確認してください。表示されていない場合は再インストールしてください。

CHECK

▶ 今すぐやること: 上記パターン1(再起動・再読み込み)から順番に確認を開始する(5分)

Q: フォントが原因でFigmaファイルが開けなくなることはありますか?

A: ファイル自体が開けなくなるケースは少ないですが、特定のフォントが読み込まれない場合、そのフォントが使われているテキストが別のフォントに自動置換されて表示されることがあります。クライアント納品前には必ずフォントの表示確認をしてください。

Q: シークレットモードで試したらフォントが表示された場合、何をすべきですか?

A: ブラウザ拡張機能が原因です。拡張機能を1つずつ無効化して、どの拡張機能が干渉しているかを特定してください。特定後は該当拡張機能を無効化するか、Figmaを使う時間帯だけオフにする運用に切り替えてください。

デザインの仕事で単価を上げたい方へ

Webデザインの学び方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

日本語デザインはNoto Sans JPを第一候補に選ぶ

フリーランスのWebデザイン案件では、フォント選択を誤ると文字化けや視認性の問題が後から発覚します。判断基準を持っておくと作業が速くなります。

Noto Sans JPが第一候補の理由

Noto Sans JPはGoogleが開発した日本語対応フォントで、Google Fontsから無料でダウンロードできます。字形が読みやすく、Webサイト・モバイルアプリ・印刷物の3用途すべてに対応できる汎用性が強みです。また文字欠けが発生しにくい設計のため、クライアント確認用のFigmaデータとして使う際にも安定しています。

日本語フォントはウェイトのラインナップが重要です。Noto Sans JPはThin・Light・Regular・Medium・SemiBold・Bold・Blackの7ウェイトが揃っており、デザインの強弱表現が1フォントファミリーで完結します。「このデザインだと別のフォントが必要」という場面が減るため、複数案件を並行する際のフォント管理コストが下がります。また、Google Fontsの日本語フォントを用途別に選ぶ方法についても参考にしてください。

用途別の日本語フォント選定基準

ゴシック系(Noto Sans JP・Zen Kaku Gothic New等)は、WebサイトのUI・説明文・ボタンラベルに向いています。可読性が高く、解像度の低い環境でも文字が潰れにくいためです。明朝体(Noto Serif JP・Shippori Mincho等)は、読み物系コンテンツ・記事ページ・高級感を出したいLPに向いています。ただし小サイズでの視認性がゴシック体より下がるため、14px以下での使用は注意が必要です。

Figma Communityには日本語フォントを一括プレビューできるプラグイン「Japanese Font Picker」があります(Japanese Font Picker|Figma Community)。プラグインを使うと同じテキストで複数フォントを比較できるため、クライアントへの提案前にフォント候補を絞り込む時間が大幅に短縮されます。

フォント選定でよくある間違い

デザイン初心者がやりがちなのは、デザインの見た目だけでフォントを選び、Webでの実装を考慮しないことです。FigmaでNoto Sans JPを使ってデザインしても、実装段階でそのフォントをWebフォントとして読み込む設定が抜けると、表示が崩れます。Figmaデータを渡す前にエンジニアと「どのフォントをどう実装するか」を確認しておく必要があります。また、デザインデータ内で3種類以上の異なるフォントファミリーを使うことは避けた方が賢明です。統一感が失われ、後のメンテナンスも複雑になります。

CHECK

▶ 今すぐやること: Google FontsでNoto Sans JPを検索し、ウェイト一覧を確認してダウンロードする(3分)

Q: Figma Communityの日本語フォントリソースは商用利用できますか?

A: Figma Community上のファイルはデザイン参考用途が中心です。フォント自体の商用利用可否はフォント開発元のライセンスに依存するため、各フォントのライセンス条件を必ず確認してください。

Q: 游ゴシックや游明朝のようなシステムフォントをFigmaで使えますか?

A: OSにインストールされていれば使えます。ただしシステムフォントはクライアントやエンジニアの環境に依存するため、Google Fontsで代替可能な場合はGoogle Fontsのフォントを使う方がデータの再現性が高くなります。

Figma Google Fontsの商用利用は4条件で判定

「Google Fontsは商用利用無料」という認識は基本的に正しいですが、条件を確認せずに使うとトラブルになります(Figmaで使える日本語フリーフォント一覧。商用利用も無料|igawa.co)。クライアント案件では後から問題が発覚した場合に取り返しがつかないため、4つの判定条件を事前に押さえておいてください。

条件1:ライセンスがOFL(SIL Open Font License)か

Google Fontsに収録されているフォントの大半はOFL(SIL Open Font License)というライセンスで配布されています。OFLは商用利用・改変・再配布を許可するオープンなライセンスです。Google Fontsの各フォントページ下部に「License」の記載があるので、ダウンロード前に確認してください。なお、フォントの商用利用に関する詳細な判定方法も参考にしてください。

条件2:フォントをソフトウェアに同梱して販売しないか

OFLはフォントをソフトウェアに同梱して有料販売することを制限しています(SIL Open Font License 1.1|SIL International)。Webサイト・印刷物・Figmaでのデザイン制作であれば問題ありませんが、自社開発のアプリやソフトウェアにフォントを「バンドル」して販売する場合は条件が異なります。Figmaデザインの範囲内での商用利用は問題ありません。

条件3:クレジット表記が必要か

OFLにはクレジット表記の義務はありませんが、フォント開発者や配布元に対して帰属表示を推奨するフォントも一部存在します。クライアントの公式サイトや大規模な制作物に使う場合は、フォントのREADMEファイルまたは公式ページのライセンス欄を確認してください。

条件4:フォントの改変版を使っていないか

Google Fonts以外のサイトで配布されているフォントの中には、オリジナルから改変されたバージョンが流通しているものがあります。改変版のライセンスはオリジナルと異なる場合があるため、必ずGoogle Fontsの公式サイトから直接ダウンロードしてください。「どこかのサイトで見つけたフォント」をクライアント案件に無確認で使うことは避けてください。

商用案件にGoogle Fontsを使う前にライセンスを1つひとつ確認すると、意外と時間がかかります(FigmaでGoogle Fontsを適用する相談・体験共有|Reddit)。ライセンス確認は案件開始前に一括で行う時間を確保しておくと効率的です。著作権侵害のリスクと損害賠償についても事前に把握しておくと安心です。

CHECK

▶ 今すぐやること: 現在のFigmaファイルで使用中のフォントをリストアップし、Google Fontsの各フォントページでライセンス欄を確認する(5分)

Q: Google FontsのフォントをFigmaで使ったデザインをクライアントに納品するのは商用利用に当たりますか?

A: はい、商用利用に該当します。OFLライセンスのフォントであれば商用利用は許可されているため、ライセンスがOFLであることを確認した上で使用してください。

Q: Figmaのデザインファイルそのものをクライアントに渡す場合、フォントのライセンスは問題ありませんか?

A: データの受け渡し自体はフォントの再配布には該当しません。クライアント側でそのFigmaファイルを使って商用利用する場合も、OFLであれば問題ありません。

Figma Google Fontsは5つの仕組みで管理を効率化

フォントの導入よりも一歩進んだ実務的なノウハウを5つ紹介します。基本的なインストール手順だけでは防ぎきれない、案件の手戻りを減らす運用方法です。

ハック1:フォントセットをまとめてダウンロードして管理コストを削減

【対象】 複数の日本語フォントを定期的に使うフリーランスデザイナー

【手順】

Google Fontsでよく使うフォントを一括ダウンロードします(所要時間:10分)。複数フォントをカートに追加してからまとめてダウンロードする機能が使えます。ダウンロードしたフォントはOSのフォントフォルダにまとめてインストールしてください。MacはFont Book→ファイル→フォントを追加、WindowsはF設定→個人用設定→フォントから操作します。「Figma用フォント」というフォルダをデスクトップに作り、使用ファミリーのZIPと解凍済みファイルを保管しておくと、OSの再インストール時に再導入が5分で完了します。

【コツと理由】 1件ずつダウンロードするとフォント名を毎回検索する時間(1件2〜3分)が積み重なります。月10件のフォント追加があると月20〜30分のロスになります。よく使う10フォントをまとめてインストールして常備しておくと、このロスがゼロになります。

【注意点】 ウェイトを全種類インストールする必要はありません。Regular・Bold・Lightの3ウェイトを基準にし、必要になった段階で追加インストールすると、フォントメニューが煩雑にならず管理しやすくなります。

ハック2:フォントプレビューを5分で完了させる比較フロー

【対象】 クライアント提案前にフォント候補を絞り込みたいデザイナー

【手順】

Figmaで新しいフレームを作成し、比較したいテキスト(実際のキャッチコピーや本文サンプル等)を入力します(所要時間:2分)。テキストを複製して各レイヤーのフォントだけを変更し、横並びで比較できるレイアウトにしてください。Japanese Font PickerをFigmaにインストールすると、選択したテキストに対してフォントを自動的に切り替えてプレビューできます。最終的に2〜3候補に絞ったスクリーンショットをクライアントに送付してフォント確認を依頼してください。

【コツと理由】 「フォントの方向性確認をクライアントの承認プロセスに組み込む」ことが重要です。承認を得た段階でフォントが確定するため、フォント起因の手戻りが発生しなくなります。日本語フォントの変更が発生した際のテキスト調整(文字詰め・行間再調整等)には1デザインあたり30〜60分の修正時間がかかるため、事前確認1回(5分)のコストは明らかに小さいです。

【注意点】 クライアントに複数フォントを見せる際、選択肢を5種類以上出すことは避けた方が賢明です。選択肢が多いと決定が遅れるため、3候補以内に絞って「Aはシンプル系、Bは温かみ系」のように方向性を添えて提示してください。

ハック3:フォント変数で案件をまたいだ管理を自動化

【対象】 複数のFigmaプロジェクトでフォントを一元管理したいデザイナー

【手順】

Figmaのテキストスタイル機能を使い、プロジェクトのフォント設定を定義します(所要時間:15分)。「heading-font」「body-font」「accent-font」のような命名でテキストスタイルを作成し、フォントファミリー・サイズ・行間をセットで登録してください。フォントを変更する際はテキストスタイルの定義を1箇所変更するだけで、スタイルを適用している全テキストが一括更新されます。Variables機能(変数機能)は有料プラン(Professional以上)が必要ですが、テキストスタイルは無料プランでも利用可能です。

【コツと理由】 個別設定だとフォント変更時にテキストを1つひとつ選択して変更する必要があり、見落としが発生します。テキストスタイルであれば一括変更が数秒で完了するため、クライアントから「やっぱりフォントを変えてほしい」という要望が入っても対応コストがほぼゼロになります。

【注意点】 テキストスタイルを作ったあと、新しいテキストを追加するたびにスタイルを適用し忘れるケースが多いです。テキストツールを使ったら最初にスタイルを適用するという順序をルール化してください。スタイル未適用のテキストが混在すると一括管理の効果がなくなります。

ハック4:フォント確認用チェックシートで納品前ミスをゼロに

【対象】 クライアント納品前にフォント関連のミスをなくしたいデザイナー

【手順】

Figmaの「Edit」→「Find/Replace」機能またはプラグイン(Font Fascia等)を使い、ファイル内で使用されているすべてのフォントファミリーを一覧表示します(所要時間:5分)。表示されたフォントリストに対して、各フォントのライセンスを確認済みかを別途スプレッドシートで管理してください。納品前チェックの項目として「フォント使用リストの最終確認」を必ず含めて運用してください。

【コツと理由】 デザインの見た目確認と「フォント名の一覧確認」を別工程にすることで確認漏れを防げます。Figmaファイルを長期間にわたって更新している場合、途中で追加したフォントが記録されていないケースが起こりえます。スプレッドシートによる管理はこのリスクを大幅に下げます。

【注意点】 フォント名の一覧確認はデザイン完成直後ではなく、クライアントへの最終送付直前に行ってください。完成後に修正が入ると新しいフォントが追加されることがあり、「完成時に確認した」では不十分です。

ハック5:ローカルフォントのバックアップで環境再構築を10分に短縮

【対象】 PCの買い替えや再セットアップ後もすぐに作業を再開したいデザイナー

【手順】

OSにインストール済みのフォントフォルダをまるごとクラウドストレージ(Google Drive・Dropbox等)にバックアップします(所要時間:初回のみ10分)。Macのフォントフォルダは ~/Library/Fonts 、Windowsは C:\Windows\Fonts にあります。バックアップしたフォルダをPCに同期しておくと、新しいPC環境でフォルダをフォントフォルダにコピーするだけで全フォントが復元できます。

【コツと理由】 1フォントずつダウンロードし直す場合は10種類で20〜30分かかりますが、バックアップからのリストアなら全フォントを10分以内に復元できます。納期のある案件を複数抱えている場合、環境再構築の時間を最小化することは直接的な収入確保につながります。

【注意点】 システムフォント(OSにデフォルトで含まれるフォント)はバックアップ不要です。バックアップ対象はGoogle Fontsや有料フォントなど、自分で追加したフォントのみに絞ることで、バックアップデータが不必要に大きくなることを防げます。バックアップしたフォントフォルダを第三者と共有することはライセンス違反になる可能性があるため、自分自身の環境復元目的のみに使用してください。

CHECK

▶ 今すぐやること: よく使うGoogle FontsをGoogle Fontsの公式サイトでカートに追加し、まとめてダウンロードしてOSにインストールする(10分)

Q: Figmaのテキストスタイル機能は無料プランでも使えますか?

A: はい、テキストスタイル機能は無料プランでも利用できます。Variables機能は有料プラン(Professional以上)が必要ですが、テキストスタイルだけでフォント管理を一元化する運用は十分可能です。

Q: フォントのバックアップをクラウドに保管するとライセンス違反になりますか?

A: 自分が使用するためのバックアップ目的であれば、ほとんどのフォントライセンス(OFLを含む)で許可されています。クラウド上のバックアップを他者と共有・再配布することはライセンス違反になる可能性があるため、避けてください。

Figma Google Fontsを使いこなす:今日から始める5つの行動

FigmaでGoogle Fontsを使う問題の解決は「ダウンロード→OSインストール→Figma再起動」の3ステップが基本で、ブラウザ版ではFigma Font Installerの追加が必要です。フォント未反映の原因は再起動不足・キャッシュ・拡張機能干渉・Font Installer未起動の4パターンがほとんどを占めるため、この順番で確認すれば大半は解決できます。

フォントの問題で作業が止まる時間は、フリーランスとして直接的な損失になります。この記事の手順を1回実行すれば、環境設定・ライセンス確認・日本語フォント選定まで一気に完了します。今日やるべき最初の一歩は、Google Fontsを開いてNoto Sans JPをダウンロードしてOSにインストールする5分の作業です。

状況次の一歩所要時間
デスクトップ版でフォントを追加したいGoogle FontsでダウンロードしてFigmaを再起動5分
ブラウザ版でFont Installerを導入していない公式ヘルプからFont Installerをダウンロード・起動・再読み込み10分
フォントが表示されないパターン1(再起動)から順番に確認5分
商用利用の可否を確認したい各フォントのライセンス欄でOFL表示を確認3分
納品前のフォントチェックをしたいFind/Replace機能でフォント一覧を出力して確認5分

Figma Google Fontsに関するよくある質問

Q: FigmaはデフォルトでどのくらいのGoogle Fontsに対応していますか?

A: FigmaのデフォルトではGoogle Fontsの主要ファミリーが収録されており、多数のフォントをインストールなしで選択できます。新しく追加されたフォントや一部のフォントはOSへのインストールが必要です。

Q: FigmaでGoogle Fontsを使ってデザインしたファイルを他のデザイナーに共有するとどうなりますか?

A: 相手の環境に同じフォントがインストールされていれば正常に表示されます。インストールされていない場合は自動的に別のフォントに置換されて表示されます。重要な案件では使用フォントのリストを共有相手に伝えておいてください。

Q: Figma上でフォントが「Missing font」と表示された場合はどうすればよいですか?

A: 表示されているフォント名を確認し、そのフォントをGoogle Fontsからダウンロードしてインストールしてください。インストール後にFigmaを再起動すると解決します。ブラウザ版の場合は再読み込みを忘れずに行ってください。

【出典・参照元】

Figmaデザインへのフォントの追加|Figma Help Center

Japanese Font Picker|Figma Community

Figmaウェブ版でフォントが反映されない・消えた!?|kasoudesign

figmaブラウザ版でフリーフォントを使う方法|note

FigmaでGoogle Fontsを適用する相談・体験共有|Reddit

Figmaで使える日本語フリーフォント一覧。商用利用も無料|igawa.co

SIL Open Font License 1.1|SIL International

デザインの仕事で単価を上げたい方へ

Webデザインの学び方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

フリ転編集部 jpndesft
フリーランス専門メディア「フリ転。」編集部。独立・案件獲得・税務など、フリーランスが直面する課題をわかりやすく解説することを使命としています。

フリーランスデザイナーのためのキャリア・案件・税務情報をお届けしています

お問い合わせ →

人気キーワード

フリーランスの案件・単価を調べる

フリーランス求人を探す週1〜2日・リモートOKの案件を毎日自動収集職種別の単価相場を見る48職種の月額単価を実データから集計実務ツールを使う見積・請求書・税金計算など51種を無料で

カテゴリから記事を探す

フリーランスの独立術フリーランスの資金術フリーランス職種図鑑