サイトアイコン WEBデザインMATOME

フィグマブラウザ版でパソコンのフォントをインストールする方法

小清水 和真

Figmaは、デザイナーやクリエイターの間で広く使われているデザインツールです。
その最大の魅力は、ブラウザ上で動作するため、どこからでもアクセスでき、
共同作業がしやすい点です。
ブラウザ版Figmaは便利ですが、初期設定のフォントに限られるのではなく、
自分のパソコンにインストールしたフォントを使うことができるという特徴があります。
しかし、ブラウザ版でパソコンのフォントを使うには、特定の手順を踏む必要があります。
このガイドでは、その手順を詳細に説明し、ブラウザ版Figmaで自分のフォントを活用できるようにします。

フィグマブラウザ版とデスクトップ版の違い

まず、Figmaには「ブラウザ版」と「デスクトップ版」が存在します。
デスクトップ版はFigmaアプリケーションをパソコンにインストールして使用するものですが、
ブラウザ版はChromeやSafariなどのインターネットブラウザを通して利用するものです。

Figmaデスクトップ版の特徴

Figmaブラウザ版の特徴

つまり、ブラウザ版Figmaでパソコンのフォントを使うためには、追加のセットアップが必要になります。
次のセクションでは、具体的なインストール手順を解説します。

フォントのインストール手順

Figmaでローカルフォントを使用するためには、
まずそのフォントをパソコンにインストールしておく必要があります。
ここでは、その手順を解説します。

ステップ1: フォントをダウンロード

インターネット上には、多くの無料フォントや商用利用可能なフォントがあります。
以下のようなサイトからフォントをダウンロードできます。

Google Fonts

無料で高品質なフォントを提供しているサイトです。
幅広いスタイルのフォントが揃っています。

Adobe Fonts

Adobe Creative Cloudを利用している場合、Adobe Fontsからもフォントをダウンロードできます。

ダウンロードしたいフォントを選び、
通常はフォントファイル（.ttfや.otfなどの形式）としてダウンロードします。

ステップ2: パソコンへのインストール

ダウンロードしたフォントをインストールするには、以下の手順に従います。

Windowsでのインストール方法

ダウンロードしたフォントファイルを右クリックします。
「インストール」を選択するだけで、フォントがシステムに追加されます。

Macでのインストール方法

ダウンロードしたフォントファイルをダブルクリックします。
フォントブックアプリが開き、そこで「フォントをインストール」ボタンをクリックします。

この手順でフォントがパソコンにインストールされると、
他のソフトウェア（WordやPhotoshopなど）でもそのフォントが使用可能になります。

Figmaブラウザ版でフォントを使う準備

Figmaブラウザ版で自分のパソコンにインストールされたフォントを利用するためには、
Figma Font Helperというツールをインストールする必要があります。
このツールは、Figmaがローカルフォントにアクセスできるようにするものです。
以下では、Figma Font Helperのインストール手順と、
Figmaでローカルフォントを使用するための準備について説明します。

ステップ1: Figma Font Helperのダウンロード

まず、Figma Font Helperをダウンロードする必要があります。以下の手順で進めていきます。

Figmaの公式サイトにアクセスします。

公式サイト：https://www.figma.com
自分のFigmaアカウントでログインする必要があります。

設定メニューからFigma Font Helperをダウンロードします。

ステップ2: Figma Font Helperのインストール

ダウンロードが完了したら、次にFigma Font Helperをインストールします。

Windowsでのインストール方法

Macでのインストール方法

ステップ3: インストールの確認

Figma Font Helperのインストールが完了すると、
Figmaが自動的にパソコンにインストールされているフォントを認識するようになります。
ブラウザ版Figmaを再起動し、以下の手順でフォントが正しく使用できるかを確認しましょう。

これで、Figmaブラウザ版でパソコンにインストールしたフォントが使用できるようになりました。
次のセクションでは、具体的な使い方について説明します。

Figmaでフォントを使用する

Figmaブラウザ版でパソコンにインストールしたフォントを使えるように設定が完了したら、実際にデザイン内でどのようにフォントを使用できるのかを見ていきましょう。以下の手順で進めていきます。

ステップ1: 新しいデザインファイルを作成

まずは、Figmaで新しいデザインファイルを作成します。
以下の手順で始めましょう。

ステップ2: テキストツールを使ってテキストを追加

次に、デザインにテキストを追加するためにテキストツールを使います。

ステップ3: フォントを選択

テキストが作成できたら、インストールしたフォントを適用してみましょう。

ステップ4: フォントスタイルやサイズを調整

Figmaではフォントを選ぶだけでなく、以下のようなスタイルや設定も調整することができます。

フォントサイズ

テキストサイズを変更するには、プロパティパネル内の「Size」フィールドで数値を入力するか、
スライダーを使用します。

フォントウェイト（太さ）

フォントによっては、通常の太さ以外に「Bold」や「Light」などのスタイルもあります。
プロパティパネルの「Weight」オプションから選択可能です。

文字間隔

「Letter spacing」フィールドで、文字間のスペースを調整できます。

ステップ5: 複数のフォントを使ったデザイン

一つのプロジェクト内で複数のフォントを使用することも簡単です。
たとえば、見出しには太めのフォント、本文には読みやすいスクリプトフォントを使うことで、
デザイン全体にバリエーションを持たせることができます。

同じテキストボックス内で異なる部分に異なるフォントを適用することも可能です。
テキストの一部を選択し、プロパティパネルからフォントを変更すれば、部分的なスタイリングが可能です。

ステップ6: フォントを試しながらデザインを作成

フォントを変更しながら、Figma上でリアルタイムにデザインがどのように見えるか確認できます。
フォントが多すぎる場合は、「検索」機能を使って特定のフォントを素早く見つけることも可能です。
たとえば、フォント名の一部を入力すれば、関連するフォントが絞り込まれて表示されます。

トラブルシューティング

Figmaブラウザ版でパソコンにインストールされたフォントを使用する際、
時々トラブルが発生することがあります。
ここでは、よくある問題とその解決策について説明します。

問題1: インストールしたフォントがFigmaで表示されない

インストールしたフォントがFigmaのフォントリストに表示されない場合、以下の点を確認しましょう。

Figma Font Helperが正しくインストールされているか確認

Figmaを再起動

Figmaがフォントのリストを正しく読み込んでいない場合、
ブラウザを再起動することで問題が解決することがあります。
特に、フォントをインストールした後にFigmaを起動している場合は、
一度リフレッシュまたは再起動してみてください。

ブラウザのキャッシュをクリア

問題2: フォントが正しく表示されない、または崩れて見える

インストールしたフォントがFigma上で正しく表示されない場合、以下の手順を試してください。

フォントファイルの確認

ブラウザの拡張機能を無効化

一部のブラウザ拡張機能がFigmaの動作に影響を与えることがあります。
特に、広告ブロッカーやセキュリティ拡張機能がフォントの表示を妨げる場合があります。
問題が解決しない場合、拡張機能を一時的に無効にしてみてください。

異なるブラウザで試す

使用しているブラウザ自体に問題がある可能性もあります。
別のブラウザ（Chrome、Firefox、Safariなど）でFigmaを開いてみると、
フォントが正しく表示されることがあります。

問題3: 複数のフォントが重複して表示される

Figmaで同じフォントが複数表示される場合や、異なるバージョンがリストに表示される場合は、
フォントのインストール状況に問題があるかもしれません。

フォントをアンインストールして再インストール

パソコンに同じフォントが複数インストールされている場合、Figmaでの表示が混乱することがあります。
すべてのバージョンを一度アンインストールして、最新のものを再インストールしてみてください。

フォント管理ツールを使用

特に多くのフォントをインストールしている場合、フォント管理ツールを使用することで、
不要なフォントを整理し、Figmaでの重複表示を防ぐことができます。
Macでは「フォントブック」、Windowsでは「フォントマネージャー」などのツールが利用できます。

まとめ

これで、ブラウザ版Figmaでパソコンにインストールされたフォントを
使用するための手順がすべて完了しました。
フォントが正しくインストールされていない場合でも、
Figma Font Helperの再インストールやブラウザ設定の調整で多くの問題が解決します。
Figmaを使用して、自分だけのオリジナルなデザインを作成しましょう！

モバイルバージョンを終了