Figma フォントの追加について調べてみた！

Figma

ここでは、Figmaのフォントの追加方法について説明していきます。

はじめに

Figmaでは、デフォルトでGoogle Fontsが組み込まれており、インストール不要でそのまま使用できます。
しかし、Google Fonts以外のフォントを使用したい場合は、そのフォントをローカル（自分のPC）にインストールする必要があります。

👉 共有相手がフォントを持っていない場合、「フォントが見つかりません」などのエラーメッセージが表示されることがあります。その際は、代替フォントの選択やフォントファイルの共有を検討しましょう。

Figmaでは、Google Fontsに加えて自分のコンピューターにインストールされたフォントも使用可能です。ここでは、独自フォントをFigmaで利用するための準備・設定方法を4ステップで解説します。

Figmaがサポートしているフォント形式は以下の2種類です：

多くのフォントにはスタイル（例：Regular / Bold / Lightなど）があり、それぞれが個別のファイルになっています。
（たとえば「Inter」のRegular・Bold・Extra Lightを使う場合、3つのファイルが必要です。）

💡 ポイント：
チームで作業する場合、使用するフォントスタイルを統一しましょう。
他のユーザーのPCに該当スタイルのフォントがないと、「フォントが見つかりません」のエラーが発生します。

Figmaでフォントを使うには、まず自分のPCにインストールする必要があります。

Macの場合：
「Font Book（フォントブック）」を使用してフォントを追加します。Font Bookに表示されていれば、既にインストールされておりそのまま使用できます。

●インストールされていない場合は・・・・

①Macで、Appleまたは別のソースからフォントファイル※をダウンロードします。

①Font Bookアプリで、「ファイル」＞「フォントを現在のユーザに追加」と選択します。表示されるウインドウで、フォントファイルをダブルクリックします。

②DockのFont Bookアプリアイコンにフォントファイルをドラッグし、表示されるダイアログで「インストール」をクリックします。

③Font Bookウインドウにフォントファイルをドラッグします。

④Finderでフォントファイルをダブルクリックし、表示されるダイアログで「インストール」をクリックします。

※参考：https://apps.apple.com/jp/app/フリーフォント-商用オープンタイプフォント550種/id647697434?mt=12

Windowsの場合：
フォントファイルをダウンロードし、そのファイルを右クリックして「インストール」を選択、またはフォントフォルダに直接ドラッグ＆ドロップしたら完了です。

⚠️ 注意：
Figmaは ChromeOS（Chromebook）やLinux ではローカルフォントをサポートしていません。これらの環境では、Google Fontsのみ使用可能です。

※デスクトップアプリを使用している場合、このステップは省略できます。

（アプリ内にはすでにFigmaフォントヘルパーが含まれています。）

FigmaをWebブラウザ上で使用している場合、ローカルフォントを反映させるためには「Figmaフォントヘルパー（Figma Agent）」のインストールが必要です。

インストール後、Figmaのタブを再読み込みすることでフォントが利用可能になります。

🔐 Figma Agentはlocalhost（127.0.0.1）でのみ動作し、外部公開はされません。セキュリティ面でも安全です。

インストール後、Figmaのテキストレイヤーで以下の手順でフォントを適用できます：

以上で、Figmaにおけるカスタムフォントの利用準備は完了です！