Figmaにフォントを追加したい
この記事は上記の課題に向けて作成しています。
Figmaで制作していると新しいフォントを追加したくなりますよね。
Figmaでは簡単にフォントを追加することが出来ます。
この記事ではFigmaでフォントを追加する方法を紹介していきます。
この記事を読むメリット
- Figmaでフォントを追加する方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
Figmaにフォントを追加する方法
早速Figmaでフォントを追加する方法を紹介します。
Figmaでフォントを追加する手順は下記の通りです。
Figmaにフォントを追加する手順
- PCにフォントをインストールする
- Figmaでフォントを変更する
それぞれ説明していきます。
PCにフォントをインストールする
まず始めにPCにフォントデータをインストールします。
※Figmaに限らずデザインツールはPCにインストールされているフォントが使用可能となります。
フォントは「Googleフォント」や「Adobeフォント」からダウンロード出来ます。
Adobeフォントは一部無料で使用できるみたいですが会員登録が必要なので、今回は無料で使用できるGoogleフォントからダウンロードする方法を紹介します。
①「Googleフォント」サイトにアクセス
「Googleフォント」のサイトにアクセスします。
②インストールしたいフォントを検索
次にフォントを検索します。
今回は「Inter Tight」というフォントをダウンロードします。
検索ボックスに上記フォントを入力します。
③フォントファイルをダウンロード
検索結果に表示されたフォントを選択します。
右側にある「Get font」を選択します。
「Dawnload all」を選択するとフォントデータがダウンロードされます。
④PCにフォントをインストールする
先ほどダウンロードしたZIPファイルを開きます。
続いて中身の「.ttf」という拡張子ファイルをクリックします。
フォントのインストールを選択します。
これで無事にフォントがインストールされました。
「すべてのフォント」の中に追加されています。
PCにフォントをインストールする流れは以上です。
Figmaでフォントを変更する
続いてFigmaでフォントを変更します。
まずはフォントを変更したいテキストを選択します。
続いて右側ツールの「タイポグラフィー」からフォントを選択します。
先ほど追加したフォントを選択します。
するとテキストのフォントが変わりました。
以上がFigmaにフォントを追加して変更する方法でした。
Figmaでフォントを一括変更する方法
複数あるテキストのフォントを変更する際、1つずつ変えるのはめんどうですよね。
Figmaでは複数あるテキストのフォントを一括で変更することが出来ます。
複数あるテキストのフォントを一括変更する手順
- どこか1箇所のテキストを選択する
- 「同じフォントで選択」を選択する
- フォントを変更する
①どこか1箇所のテキストを選択する
まずはどこか1箇所のテキストを選択します。
②「同じフォントで選択」を選択する
テキストを選択した状態で左上の「メインメニュー」から「編集」→「次のオプションで全て選択」→「同じフォントで選択」を選択します。
すると同じフォントのテキスト全てが選択されました。
③フォントを変更する
最後にこの状態でフォントを変更します。
すると選択された箇所全てのテキストのフォントが一括で変更されます。
作業工数を減らせるので一括変換は是非やってみてください。
Figmaにフォントを追加するのは簡単
この記事ではFigmaにフォントを追加する方法を紹介しました。
Figmaにフォントを追加するのは簡単です。
まだやったことの無い方は是非実践してみてください。
Figmaに関する他の記事はこちら
