【Figma】フォントを追加する方法

デフォルトで提供されるフォント以外を使用したい場合、フォントの追加方法を知っておく必要があります。

本記事ではFigmaにフォントを追加する方法について詳しく解説します。ローカルフォントの使用方法、Google Fontsの活用、さらにはカスタムフォントをFigmaで適用する方法についても紹介します。

Figmaのフォントの基本

Figmaでは次の2種類のフォントを利用できます。

クラウドフォント（Google Fonts）

Figmaにデフォルトで組み込まれているフォント。

ローカルフォント

ユーザーのPCにインストールされているフォント。

クラウドフォント（Google Fonts）

FigmaはGoogle Fontsと統合されており、追加のインストールなしで多くのフォントを利用できます。プロジェクトのニーズに応じて、好みのフォントをすぐに選択できます。

ローカルフォント

ローカルフォントはPCにインストールされているフォントをFigma内で使用できる機能です。ただし、Figmaはクラウドベースのアプリケーションのため、ローカルフォントを利用するには専用のツールをインストールする必要があります。

Google FontsをFigmaで使用する方法

Figmaに標準搭載されているGoogle Fontsを使用する手順は以下の通りです。

テキストツールを選択

Figmaの左側のツールバーから「T」アイコンをクリックするか、ショートカットキー「T」を押します。

フォントメニューを開く

画面上部のフォント設定エリアをクリックします。

フォントを選択

リストの中から好きなフォントを選びます。

Figmaに組み込まれているGoogle Fontsはクラウド上で管理されているため、別途ダウンロードやインストールの必要はありません。

ローカルフォントをFigmaで使用する方法

ローカルフォントをFigmaで使用するにはFigma Font Installerをインストールする必要があります。以下の手順でセットアップを行いましょう。

Figma Font Installerのインストール

Figma公式サイト にアクセスします

https://www.figma.com/ja-jp/downloads

「Resources」メニューから「Font Installer」を探します

WindowsまたはMacに適したバージョンをダウンロードします

ダウンロードしたインストーラーを開き、指示に従ってインストールします

ローカルフォントの使用手順

PCにフォントをインストール

使用したいフォントをダウンロードし、PCにインストールします

Figma Font Installerを起動

インストール後、Figma Font Installerを起動します。

Figmaを開く

Figmaを再起動しテキストツールを使用してフォントを選択できるか確認します。

カスタムフォントをFigmaで使用する方法

カスタムフォント（商用フォントや特定のブランドフォントなど）を使用する場合も、ローカルフォントと同様の手順で追加できます。

フォントファイルの準備

使用したいフォントがOTF（OpenType）やTTF（TrueType）形式であることを確認してください。WEBフォント（WOFFやWOFF2）は直接使用できません。

フォントのインストール

フォントファイルをダウンロード

PCにインストール（フォントファイルをダブルクリックし、「インストール」を選択）

Figma Font Installerを起動

Figmaを開いてフォントを選択

この手順で、Figma内でカスタムフォントを適用できます。

フォントが適用されない場合の対処法

Figmaの再起動

フォントが追加されてもFigmaに反映されない場合は、一度Figmaを再起動してください。

フォントの再インストール

Figma Font Installerが正しく起動していない場合、ローカルフォントを読み込めません。インストーラーを再インストールしてみましょう。

ブラウザ版ではなくデスクトップ版を使用

ブラウザ版とデスクトップアプリ版の両方から試してみましょう。

チームメンバーとフォントを共有する方法

チームでデザイン作業を行う場合、他のメンバーとフォントを統一することが重要です。

Google Fontsの利用

Google Fontsを使用すれば特定のフォントをインストールしなくてもチーム全員が同じフォントを利用できます。

ローカルフォントを共有する場合

ローカルフォントを使用する場合、以下の方法でメンバーとフォントを共有できます。

フォントファイルを共有する（Google Drive、Dropboxなどを利用）

チームメンバーが各自インストールする

Figma Font Installerをインストールしてもらう

まとめ

Figmaでフォントを追加する方法を解説しました。

• Google FontsはFigmaに標準搭載されており簡単に使用可能
• ローカルフォントを使用するにはFigma Font Installerが必要
• カスタムフォントを適用するにはPCにインストール後、Figmaを再起動
• チームで統一したフォントを使用するには、Google Fontsを活用するかフォントファイルを共有

フォントを適切に追加・管理することで、より魅力的なデザインを作成しましょう！