今回はWebページ製作に役立つGoogleFontsの使い方と、個人的に使いやすいフォントをご紹介したいと思います。
Webページにだけ限らず印刷物などでも言えることですが、フォントを変えるだけでガラッとイメージが変わりますので、ぜひ一度利用してみてください！
GoogleFontsとは
- Googleが公開しているWebフォントを使用できるサービス
- 完全無料
- 商用サイトでも使用OK！
Webフォントとは
これまでは、閲覧する各端末にインストールされているフォントでしか表示することができませんでした。
そのため、制作時に指定したフォントが端末にインストールされていない場合、別のフォントで代用されてしまうという問題点がありました。
Webフォントを使用すると……
Webフォントサーバーからフォントを読み込んで表示させることができます。
閲覧者の端末にフォントがインストールされていなくても同じフォントで表示できるようになったため、どの端末でも同じ見え方になります！
日本語フォントもあります
これまでは英語フォントのみでしたが、2018年9月より日本語フォントが正式にサポートされました！Webサイトでの表現の幅がぐっと広がりましたので、一度導入してみてはいかがでしょうか？
GoogleFontsの使い方
今回は日本語フォントの導入方法を解説していきたいと思います。英字フォントでも手順はほとんど同じですので、必要に応じて操作してください。
上部にあるプルダウンメニュー「Language」から「Japanese」を選択してください。
これで、日本語のフォントだけ表示をすることができました。
追加したいフォントの右上にある「＋」をクリック。今回は例として、Webサイトで頻繁に使用されている「Noto Sans JP」を例にします。
画面の右下に黒いバーが表示されたかと思います。「－」をクリックするとウィンドウが上へ向かって伸びるので、ここで読み込むフォントの設定をしていきます。
- 「CUSTOMIZE」クリック
- 導入したいフォントの太さを選ぶ
一般的なWebサイトでは、本文に使用する「regular」と、見出しや強調したい部分に使用する「bold」があれば事足りるかと思います。
何種類もWebフォントを使用すると、ページの読み込み速度が遅くなってしまいます。使いたいフォントの使いたい太さだけ読み込むようにしましょう！
ここからは実際にフォントを読み込んでいきます。
- 「EMBED」をクリック
- HTMLを確認
- CSSを確認
HTML
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">HEAD部分でフォントを読み込みます。
CSS
body{
font-family: 'Noto Sans JP', sans-serif;
}CSSでもフォントを読み込みます。
Webフォントを適用したい要素に対し、font-familyでフォントを指定してください。
太さを変更したい場合
.class{
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
}font-weightで太さを指定します。STEP4で設定したフォントの太さ（light、bold、mediumなど）をプロパティに指定します。
これでWebフォントの導入は終わりです！
おすすめフォント
ここからは独断と偏見にはなりますが、個人的に好き（あるいは使いやすい）フォントを紹介します。日本語は８種類しかないので省略、英字のみのご紹介です。
Lato
無難で使いやすいデザインですが、丸みがあって柔らかい印象です。
Exo 2
可読性・視認性共に高いフォントですが、横線が所々斜めのデザインで、一般的な英字フォントより少しだけおしゃれな印象です。
Paytone One
元々のフォントウェイトが太めなこともあり、見出しに使うとインパクト大。ポップなWebサイトや女性向けWebサイトに使用すると良さそうです。
Montserrat
割といろいろなWebサイトで使用されています。「o」が正円で、かつフォントの全体的な幅が広めなので可読性が高く、大変使いやすいフォントです。
さいごに
GoogleFontsを使用すれば簡単にWebページの印象を変えることができる他、デフォルトのフォントよりも読みやすいサイトを作成することも可能ですので、ぜひ一度試してみてください。
