Figmaデザインへのフォントの追加
デフォルトでは、FigmaデザインファイルにはGoogleフォントが含まれています。別のフォントを使用するには、そのフォントをコンピューターにインストールして、Figmaデザインファイルでアクセスします。
注: Figmaデザインファイルに独自のフォントを使用した場合、そのファイルを共有した人は誰でもそのフォントをプレビューすることができます。そのフォントを使用してテキストレイヤーを編集する場合、それをコンピューターにインストールする必要があります。欠落しているフォントの管理に関するエラーが表示される場合があります。
Figmaデザインで独自のフォントを使用するには、以下の手順に従ってください。
1. フォントファイルの準備とダウンロード
フォントは一般に、OpenType (.OTF)またはTrueType (.TTF)ファイルの集合です。各フォントは複数のスタイルを持ち、それぞれのスタイルには独自のファイルがあります。
たとえば、Inter Regular、Inter Bold、Inter Extra Lightを使用するには、3つのフォントファイルが必要です。
ヒント: 他のユーザーも使用するフォントを使う場合は、必ず同じスタイルにしてください。他のユーザーがファイルでフォントスタイルを使用しているにもかかわらず、自分のコンピューターにそのスタイルがないと、フォントの欠落エラーが発生します。
注: .TTFおよび.OTFのフォントファイルのみサポートされます。
2. コンピューターへのフォントのインストール
フォントを使用するには、コンピューターのフォントマネージャーにインストールしなければなりません。
- MacではフォントマネージャーはFont Bookと呼ばれています。AppleはMacのFont Bookへのフォントのインストールと検証に関するガイドラインを提供しています。一般的なルールとして、そのフォントがFont Bookに表示されていれば、コンピューターにインストールされていることになります。
- Windowsでは、フォントファイルをフォントフォルダに追加することで、フォントをインストールできます。フォントの追加 →
注: FigmaはChromeOSまたはLinuxを実行しているデバイスのフォントをサポートしていません。ChromebookとLinuxのユーザーは、FigmaのデフォルトフォントであるGoogleフォントのみを使用できます。
3. Figmaフォントヘルパーのインストール
注: デスクトップアプリを使用中の場合は、この手順をスキップできます。デスクトップアプリにFigmaフォントヘルパーが含まれています。
ウェブブラウザでFigmaを使用する場合、Figmaデザインファイルに独自のフォントを追加する前に、フォントヘルパーとも呼ばれるFigmaインストーラーをインストールする必要があります。
インストール後、ブラウザで開いているファイルを再度読み込むと、フォントの使用が開始されます。
注: FigmaフォントインストーラーであるFigma AgentはlocalhostでHTTPおよびHTTPSサーバーを実行します。figma.comからの接続のみが可能で、インターネットには公開されていません。
コンソールログで、またはコンピューターでアクティビティーをモニタリングしているときに、FigmaAgentに関連するイベントが表示される場合があります。localhostのループバックアドレスは127.0.0.1に解決されます。
必要に応じて、いつでもフォントヘルパーをアンインストールできます。
4. デザインファイルでのフォントの使用
フォントを検索して使用するには、次の手順に従います。
- Figmaデザインファイルから[テキストレイヤー]を選択または作成します。
- 右サイドバーにある[フォント選択機能]タブを開きます。
- フィルタードロップダウンを開き、[自分がインストール]を選択します。
ヒント: ファイル内のフォントの表示と適用に関する詳細
注: お困りですか?フォントの問題に関するトラブルシューティングのガイドを確認 →