Webデザインを制作する際はどんな端末でも同じ様にフォントが表示できるWebフォントのGoogle Fonts（グーグルフォント）がおすすめです。
今回はGoogle Fonts（グーグルフォント）の使い方とおすすめの日本語フォントを紹介します。
Google Fonts（グーグルフォント）とは
Google Fonts（グーグルフォント）とはGoogleが提供しているWebフォントサービスです。
約1,400種類のフォントが無料で利用でき、その中で日本語フォントは約50種類用意されています。
Google Fonts（グーグルフォント）のメリット
- 約1,400種類のフォントが無料で使用できる
- 商用利用可能
- Webフォントとして利用可能で端末を選ばない
- PCにダウンロードもできる
Webフォントで端末を選ばない
それぞれの端末によってインストールされているフォントは異なります。なのでサイトに使用したフォントが閲覧者の端末にない場合は自動的に別のフォントに変わってしまいます。
しかし、Google Fontsで設定したサイトは端末にフォントがなくても、どの環境でも指定したフォントが表示される様になります。
PCにダウンロードもできる
Google Fonts（グーグルフォント）はWebフォントだけでなくPCにインストールすることもできます。
インストールしたGoogle FontsはイラストレーターやPhotoshopに使うことができます。もちろん商用利用可能です。
＼ 無料で1,400種類のフォントが使える ／
Google Fonts（グーグルフォント）の使い方
Google Fonts（グーグルフォント）の使い方の手順を紹介します。
Google Fontsのサイトにアクセスします。
＼ 無料で使えるよ ／
フォントの検索方法を紹介します。
- Search fonts
- フォント名を入力します。
- sentence
- 文か段落の表示を選択できます。
- Type something
- フォントサンプルの文字を入力できます。
- Categories
- フォントのカテゴリーの選択できます
- Serif：明朝体
- Sans Serif：ゴシック体
- Display：装飾文字
- Handwriting：手書き風の文字
- Monospace：等幅フォント
- フォントのカテゴリーの選択できます
- Language
- 言語選択：日本語のフォントを検索する場合は「Japanese」を選択
- Font properties
- フォントのスタイルをから検索できます。
- 太さ・斜体などが選択できます。
フォントの選択方法を紹介します。
フォントをクリックします。
フォント見本の右にある「Select （フォント名）」をクリックします。
選択したフォントは右にある「Selected family」パネルに表示されます。
「Selected family」が表示されていない場合は❶のアイコンをクリックします。
サイトで使用する
「Selected family」に表示されているコードをそのままサイトに貼り付けます。
フォントをダウンロードする
画面右上の「Download family」をクリックすると指定のフォントがダウンロードされます。
フォントをインストールするとAdobe Illustratorやパワーポイントなどにも使用することができます。
おすすめのGoogle Fonts（日本語）
Google fontsで日本語を検索する場合は「Language」を「Japanese」にします。
Noto Sans Japanese
癖のないオーソドックスなゴシック体のフォントです。GoogleとAdobeの共同開発のフォントでウェイトは6種類になります。
BIZ UDPGothic
モリサワのUDフォントです。UDフォントとはユニバーサルデザインフォントのことで可読性、視認性、識別性などに考慮したフォントになります。交通標識や看板や案内板など情報を正確に伝達できるフォントです。
ウェイトは2種類
M PLUS 1p
メイリオに似ているフォントです。ふところが広くゆったりとした形状です。 デザインに使いやすいフォントです。
ウェイトは7種類
M PLUS Rounded 1c
M PLUS 1pの丸ゴシック体です。ウェイトは7種類
Noto Serif Japanese
クセがなく視認性にも優れたフォントです。Webサイトでもよく使われています。
ウェイトは7種類
Klee One
教科書系のフォントです。
ウェイトは2種類
まとめ
Google Fontsの使い方とおすすめの日本語フォントを紹介しました。
お役に立てたら幸いです。
その他に無料で使えるフォントを紹介した記事も参考にどうぞ。
コメント