教え子さんに備忘録：おすすめ日本語フリーフォントと、figmaブラウザ版でフリーフォントを使う方法

市角壮玄 HOXAI　アートディレクター/デザイナー/BBT大学准教授/料理研究家/映像作家

2024年7月1日 15:06

デザイナー1年生の皆さん、こんにちは。デザイン事務所HOXAIの市角壮玄です。BBT大学経営学部デジタルビジネスデザイン学科准教授。各種企業自治体でデザインとデザイン思考を面白おかしく教えてますー！

今日は、おすすめ日本語フォントのご紹介と、ブラウザ版Figmaでローカルフォントを使う方法をシェア。講義内で必ず解説するので備忘録的に自分の記事においておこうと思います。

figmaブラウザ版でフリーフォントを使う方法

1. Figma Font Installerのダウンロード

まずはじめに、Figmaのダウンロードページにアクセスします。ページの右下に「フォントインストーラー」がありますので、それをクリックしてダウンロードしましょう。以下のリンクから直接アクセスできます。

2. フォントインストーラーのインストール

次に、ダウンロードした「Install FigmaAgent.dmg」をダブルクリックして開きます。以下の手順に従ってインストールを進めます。

「Install Figma Agent」をダブルクリックして開きます。
ダウンロードするかどうかの警告文が表示されたら、「開く」をクリックします。
最後に、インストール完了のメッセージが表示されるので、「OK」をクリックします。

これで、ブラウザ版Figmaでもローカルフォントが反映されるようになります。

3. ブラウザ版Figmaでのフォント利用

インストールが完了したら、ブラウザ版Figmaを開きましょう。新しいデザインプロジェクトを開始し、フォントリストにローカルフォントが表示されていることを確認してください。これで、あなたのデザインに個性を加える準備が整いましたね！

トラブルシューティング

もしローカルフォントが表示されない場合は、以下のポイントを確認しましょう：

Figma Font Installerが正しくインストールされているか
ブラウザを再起動する
Figmaのキャッシュをクリアする

そもそもフォントのインストール方法がわからない？

そんな方はこちら。

Windowsでのフリーフォントのダウンロードとインストール方法

フォントサイトにアクセス
お好みのフリーフォント配布サイトにアクセスします。以下のリンクからアクセスできます。
- Google Fonts
- Font Squirrel
フォントをダウンロード
好きなフォントを選び、「Download」ボタンをクリックしてフォントファイル（通常はZIPファイル）をダウンロードします。
フォントファイルを解凍
ダウンロードしたZIPファイルを右クリックし、「すべて展開」を選択してフォントファイルを解凍します。
フォントをインストール
解凍したフォントファイル（.ttfまたは.otfファイル）を右クリックし、「インストール」を選択します。これでインストールが完了です。

Macでのフリーフォントのダウンロードとインストール方法

フォントサイトにアクセス
お好みのフリーフォント配布サイトにアクセスします。以下のリンクからアクセスできます。
- Google Fonts
- Font Squirrel
フォントをダウンロード
好きなフォントを選び、「Download」ボタンをクリックしてフォントファイル（通常はZIPファイル）をダウンロードします。
フォントファイルを解凍
ダウンロードしたZIPファイルをダブルクリックしてフォントファイルを解凍します。
フォントをインストール
解凍したフォントファイル（.ttfまたは.otfファイル）をダブルクリックします。フォントブックが開き、「フォントをインストール」ボタンをクリックします。これでインストールが完了です。

最後にちょっと自己紹介
わたくしのデザイナーとしての制作物はこちら。

その他、デザイン思考を活用した事業創造ワークショップやコンサルティングを請け負っております。

#デザイナーの頭の中書いてます！
デザインについてのお話、他にもありますので興味があったら。