Figmaデザインへのフォントの追加 – Figma Learn - ヘルプセンター

この機能を使用できるユーザー

誰でもFigmaデザインにフォントを追加できます

デフォルトでは、FigmaデザインファイルにはGoogleフォントが入っています。別のフォントを使用するには、そのフォントをコンピューターにインストールしてFigmaデザインファイルからアクセスします。

注意: Figmaデザインファイルで独自のフォントを使用している場合、ファイルを共有したユーザーは、そのフォントを自分のコンピューターにインストールしないとプレビューできません。この場合、欠落しているフォントに関するエラーが表示されることがあります。

Figmaデザインで独自のフォントを使用するには、以下の手順に従います。

use-a-font-in-design-flow (1).png

1. フォントファイルの準備とダウンロード

フォントは一般に、OpenType (.OTF)またはTrueType (.TTF)ファイルの集合です。各フォントは複数のスタイルを持ち、それぞれのスタイルには独自のファイルがあります。

たとえば、Inter Regular、Inter Bold、Inter Extra Lightを使用するには、3つのフォントファイルが必要です。

ヒント: 他のユーザーも使用するフォントを使う場合は、必ず同じスタイルにしてください。他のユーザーがファイル内でフォントスタイルを使用しているにもかかわらず、自分のコンピューターにそのスタイルがないと、フォントの欠落エラーが発生します。

注: .TTFおよび.OTFのフォントファイルのみサポートされます。

フォントを使用するには、コンピューターのフォントマネージャーにインストールしなければなりません。

MacではフォントマネージャーはFont Bookと呼ばれています。AppleはMacのFont Bookへのフォントのインストールと検証に関するガイドラインを提供しています。一般的なルールとして、そのフォントがFont Bookに表示されていれば、コンピューターにインストールされていることになります。
Windowsでは、フォントファイルをフォントフォルダに追加することで、フォントをインストールできます。フォントの追加 →

注: FigmaはChromeOSまたはLinuxで作動するデバイスのローカルフォントをサポートしていません。ChromebookとLinuxのユーザーは、FigmaのデフォルトフォントであるGoogleフォントのみを使用できます。

注: デスクトップアプリを使用中の場合は、この手順をスキップできます。デスクトップアプリにFigmaフォントヘルパーが含まれています。

WebブラウザでFigmaを使用中の場合は、Figmaデザインファイルに独自のフォントを追加する前に、フォントヘルパーとも呼ばれるFigmaインストーラーをインストールする必要があります。

インストール後、ブラウザで開いているファイルを再度読み込むと、フォントの使用が開始されます。

注: FigmaフォントインストーラーであるFigma AgentはlocalhostでHTTPおよびHTTPSサーバーを実行します。figma.comからの接続のみが可能で、インターネットには公開されていません。

コンソールログで、またはコンピューターでアクティビティーをモニタリングしているときに、FigmaAgentに関連するイベントが表示される場合があります。localhostのループバックアドレスは127.0.0.1に解決されます。

フォントを検索して使用するには、次の手順に従います。

ヒント: ファイル内のフォントの表示と適用に関する詳細