takato（@n8takato）です！
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にフォントを追加する方法を紹介しました。
Figmaにフォントを追加するのは簡単です。
まだやったことの無い方は是非実践してみてください。
Figmaに関する他の記事はこちら
