【Figma】フォントの追加とフォントを変更する方法を紹介

この記事は上記の課題に向けて作成しています。

Figmaで制作していると新しいフォントを追加したくなりますよね。

Figmaでは簡単にフォントを追加することが出来ます。

この記事ではFigmaでフォントを追加する方法を紹介していきます。

この記事を読むメリット

• Figmaでフォントを追加する方法がわかる

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

早速Figmaでフォントを追加する方法を紹介します。

Figmaにフォントを追加するにはPCにフォントデータをインストールする必要があります。

※Figmaに限らずデザインツールはPCにインストールされているフォントが使用可能となります。

フォントは「Googleフォント」や「Adobeフォント」からダウンロード出来ます。

Adobeフォントは一部無料で使用できるみたいですが会員登録が必要なので、今回は無料で使用できるGoogleフォントからダウンロードする方法を紹介します。

PCにフォントデータをインストールする手順

1. 「Googleフォント」サイトにアクセスする
2. インストールしたいフォントを検索する
3. フォントファイルをダウンロードする
4. PCにフォントをインストールする

「Googleフォント」サイトにアクセスする

まず始めに「Googleフォント」のサイトにアクセスします。

インストールしたいフォントを検索する

次にフォントを検索します。

今回は「Inter Tight」というフォントをダウンロードします。

検索ボックスに上記フォントを入力します。

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

検索結果に表示されたフォントを選択します。

右側にある「Get font」を選択します。

「Dawnload all」を選択するとフォントデータがダウンロードされます。

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

先ほどダウンロードしたZIPファイルを開きます。

続いて中身の「.ttf」という拡張子ファイルをクリックします。

フォントのインストールを選択します。

これで無事にフォントがインストールされました。

「すべてのフォント」の中に追加されています。

PCにフォントをインストールする流れは以上です。

Figmaでフォントを変更する

続いてFigmaでフォントを変更します。

Figma上でフォントを変更する手順は下記の通りです。

Figmaでフォントを変更する手順

1. フォントを変更したいテキストを選択する
2. タイポグラフィーから変更したいフォントを選ぶ

フォントを変更したいテキストを選択する

まずはフォントを変更したいテキストを選択します。

タイポグラフィーから変更したいフォントを選ぶ

続いて右側ツールの「タイポグラフィー」からフォントを選択します。

先ほど追加したフォントを選択します。

するとテキストのフォントが変わりました。

以上がFigmaにフォントを追加して変更する方法でした。

Figmaでフォントを一括変更する方法

Figmaでは複数テキストのフォントを一括で変更することが出来ます。

手順は下記の通りです。

複数あるテキストのフォントを一括変更する手順

1. 1箇所テキストを選択する
2. 「同じフォントで選択」を選択する
3. フォントを変更する

1箇所テキストを選択する

まずはどこか1箇所テキストを選択します。

「同じフォントで選択」を選択する

テキストを選択した状態で左上の「メインメニュー」から「編集」→「次のオプションで全て選択」→「同じフォントで選択」を選択します。

すると同じフォントのテキスト全てが選択されました。

フォントを変更する

最後にこの状態でフォントを変更します。

すると選択された箇所全てのテキストのフォントが一括で変更されます。

作業工数を減らせるので一括変換は是非やってみてください。

フォントを変更したテキストを縦書きにすることも出来ます。

あわせて読みたい

Figmaでテキストを縦書きにする方法を紹介！ Figmaでテキストを縦書きにする方法を知りたい この記事は上記の課題に向けて作成しています。 Figmaでテキストを縦書きに出来たら制作の幅が広がりますよね。 しかし今...

Figmaにフォントを追加するのは簡単

この記事ではFigmaにフォントを追加する方法を紹介しました。

Figmaにフォントを追加するのは簡単です。

まだやったことの無い方は是非実践してみてください。