Google Fontsをダウンロードする方法

Google Fontsで提供されているWebフォントをダウンロードして、PhotoshopやXDで使用できるようにする手順の備忘録です。
Google Fontsは「Open Source Fonts」で基本的に無料で利用することができます。様々な言語のフォントに対応しており、日本語フォントも種類が豊富です。

まずは、この中からダウンロードしたいフォントを選択します。
Google Fonts で使いたいフォントを探す
ダウンロードしたいフォントの名前やキーワードが分かっている場合は、検索ボックスから直接探すことができます。

検索ボックス下の「Categories」では、フォントの種類を絞り込むことができます。

- Serif:セリフ・フォント
- Sans Serif:サンセリフ・フォント
- Display:装飾文字系フォント
- Handwriting:手書き風フォント
- Monospace:等幅フォント
日本語フォントの明朝体を選択したい場合はSerif(セリフ)、ゴシック体を選択したい場合はSans Serif(サンセリフ)を選択します。
「Language」の項目を「Japanese」に設定すると、日本語フォントのみ表示することができます。

検索ボックスの横にある「Sentence」では、サンプルとして表示するテキストを変更することができます。

- Custom:利用したいテキストの表示
- Sentence:一文の短めのテキストを表示
- Alphabet:ABC順にアルファベットを表示
- Paragraph:一段落の少し長めのテキストを表示
- Number:数字を表示
「Custom」を選択して表紙するテキストを入力してみました。
(一部適応されないフォントもあります。)

一覧の右上にある「Sort by」では、一覧表示の並順を指定することができます。

- Trending:トレンド順
- Popular:人気順
- Date Added:新着順
- Alphabetical:アルファベット順
デフォルトではTrending(最近の流行順)が選択されています。
一覧からフォントを選択すると個別の詳細ページを見ることができます。

詳細ページでは、表示するテキストや文字サイズを調整したり、収録されている文字の一覧を見ることができます。
Google Fontsをダウンロードする
フォントの詳細ページの右上にある「Dawnload family」をクリックするとzipファイルがダウンロードされます。

今回は、「Kosugi Maru」をダウンロードしてみました。
ダウンロードされたファイルを解凍して、フォントファイルをパソコンにインストールします。

Macの場合は、アプリケーションの「Font Book」に入れると使用できます。

今回ダウンロードした「Kosugi Maru」は、「MotoyaL Maru」を選択すると表示できます。