Font Awesomeをパソコンにインストールする方法【アイキャッチ画像に】


Font Awesome

イラストやブログのアイキャッチ画像のために、アイコンを簡単に使う方法はないかな?

この記事ではこんな疑問を解決します。

アイコンフォントの Font Awesome を使えば、この記事のアイキャッチ画像のようなイラストを簡単に作ることができます。

この記事では以下を解説します。

  • Font Awesome をダウンロード・インストールする方法
  • 無料ソフトの GIMP を使って簡単なアイキャッチ画像を作る方法

5分でインストールして、オシャレなアイコンをいろいろなイラストに使えるようになります。

Font Awesome とは?

Font Awesome は人物のシルエットやモノなどのアイコンや、Twitter などのブランドのロゴが簡単に使えるフォント集です。

無料の Font Awesome Free と、有料の Font Awesome Pro があり、無料版でもかなりの種類のアイコンが使えます。

ウェブサイトでは以下のように Web フォントで使われることが多いです。

Font Awesome ウェブサイトでの使用例

しかしウェブサイトだけでなく、パソコンにインストールして Photoshop や GIMP などの画像編集ソフトで使うこともできます。

Font Awesome Free のライセンス

無料で使えるとはいえ、画像などに使って問題ないのかは気になるところですよね。

Font Awesome は Free と Pro 版でライセンスが分かれていますが、結論としては Free 版のフォントをデザインに使ってよいと解釈できます。

これは Font Awesome Free が SIL OFL 1.1 License で配布されているためです。公式サイトからの抜粋は以下です。

Fonts — SIL OFL 1.1 License
In the Font Awesome Free download, the SIL OFL license applies to all icons packaged as web and desktop font files.

あらゆる種類のデザイン作業にフォントをそのまま使えることは、SIL OFL 1.1 License のサイトの FAQ(よくある質問)の 1.1 に記載されています。

Answer: Yes. You are very welcome to do so. Authors of fonts released under the OFL allow you to use their font software as such for any kind of design work. No additional license or permission is required, unlike with some other licenses.

ほかにも SIL OFL ライセンスの参考訳はOpen Source Group Japan Wikiに記載されています。

ただし Facebook や Twitter などのブランドのロゴについては、各ブランドが定めるガイドラインを別途チェックしたほうがよさそうです。

Font Awesomeのダウンロードとパソコンへのインストール方法

ダウンロードからインストールまで、5分もあれば終わります。

Font Awesomeのダウンロード

Font Awesome は公式サイトのダウンロードページから手に入れることができます。

リンク:Font Awesomeダウンロードページ

右側にある Desktop の「Free for Desktop」を選びます。

Font Awesome ダウンロード

ファイルはfontawesome-free-5.11.2-desktop.zipのような名前です。(バージョンは変わる可能性があります)

Font Awesomeのインストール

ダウンロードした zip ファイルを解凍すると3つのフォルダが出てきます。otfsを開きます。

Font Awesome フォルダ

解凍すると以下の 3 つのフォントファイルが出てきます。

  • Font Awesome 5 Brands-Regular-400.otf
  • Font Awesome 5 Free-Regular-400.otf
  • Font Awesome 5 Free-Solid-900.otf

これらを右クリックして「インストール」します。

Font Awesome インストール

インストールが終わると、ソフトウェアから使うことができるようになります。

例:画像編集ソフト「GIMP」で Font Awesome を使う

例として無料の画像編集ソフト「GIMP」で Font Awesome を使ったイラストを作ることができます。

GIMPはGIMP公式サイトから無料でダウンロードできます。

「ファイル」→「新しい画像」から 640*320 ピクセルで新しい画像を作ります。

Font Awesome GIMP で使う

メニューから「テキスト」を選び、「Font Awesome 5 Free」を選びます。

Font Awesome GIMP で使う

画面の中央あたりをクリックすると入力できるようになります。「cat」と入力し、Ctrl+Aでテキストをすべて選択して「太字」をクリックします。

Font Awesome GIMP で使う

文字が猫のアイコンに変わりました。太字にしないとアイコンに変化しないので、そこだけ注意が必要です。

Font Awesome GIMP で使う

デザイナーではない素人でも、簡単にオシャレなアイコンを使った画像を作ることができます。

Font Awesome GIMP で使う

この例では「cat」と入力しましたが、ここに入力する文字とアイコンの対応は Font Awesome のアイコンギャラリーから確認できます。

参考:Font Awesome のアイコンギャラリー

Twitter などのブランドロゴのアイコンを使いたい場合、フォントは「Font Awesome 5 Brands」を選択します。

Font Awesome GIMP で使う

おわりに

この記事をまとめます。

  • Font Awesome はパソコンに簡単にダウンロード・インストールできます
  • 無料ソフトの GIMP を使って、アイコンを使ったイラストも簡単に作れます

ブログのアイキャッチ画像や SNS のヘッダー画像など、用途はたくさんあります。参考になれば嬉しいです。