MENU

GoogleFontsの使い方とおすすめフォント

2021 2/13
GoogleFontsの使い方とおすすめフォント

今回はWebページ製作に役立つGoogleFontsの使い方と、個人的に使いやすいフォントをご紹介したいと思います。

Webページにだけ限らず印刷物などでも言えることですが、フォントを変えるだけでガラッとイメージが変わりますので、ぜひ一度利用してみてください!

目次

GoogleFontsとは

  • Googleが公開しているWebフォントを使用できるサービス
  • 完全無料
  • 商用サイトでも使用OK!

GoogleFontsを使いこなせるようになれば、見出しの部分だけフォントを変更するなど、柔軟な表現が可能になります!

Webフォントとは

フォントAが閲覧端末にインストールされていない場合、別のフォントで代用されてしまう

これまでは、閲覧する各端末にインストールされているフォントでしか表示することができませんでした。

そのため、制作時に指定したフォントが端末にインストールされていない場合、別のフォントで代用されてしまうという問題点がありました。

Webフォントを使用すると……

サーバーにあるフォントAを読み込むので、どの端末でも表示可能!

Webフォントサーバーからフォントを読み込んで表示させることができます。

閲覧者の端末にフォントがインストールされていなくても同じフォントで表示できるようになったため、どの端末でも同じ見え方になります!

日本語フォントもあります

これまでは英語フォントのみでしたが、2018年9月より日本語フォントが正式にサポートされました!Webサイトでの表現の幅がぐっと広がりましたので、一度導入してみてはいかがでしょうか?

2019年11月現在、日本語フォントは8種類です。今後増える可能性もありますので、要チェックです!

GoogleFontsの使い方

今回は日本語フォントの導入方法を解説していきたいと思います。英字フォントでも手順はほとんど同じですので、必要に応じて操作してください。

STEP
GoogleFontsへアクセスする

まずはGoogleFontsにアクセスします。英語ページですので少し難しく感じてしまうかもしれませんが、一つ一つ解説していきますので安心してください。

Google Fonts
Google Fonts
Google FontsMaking the web more beautiful, fast, and open through great typography
STEP
日本語フォントを表示する

上部にあるプルダウンメニュー「Language」から「Japanese」を選択してください。

これで、日本語のフォントだけ表示をすることができました。

STEP
追加したいフォントを選ぶ

追加したいフォントの右上にある「+」をクリック。今回は例として、Webサイトで頻繁に使用されている「Noto Sans JP」を例にします。

STEP
フォントの設定

画面の右下に黒いバーが表示されたかと思います。「-」をクリックするとウィンドウが上へ向かって伸びるので、ここで読み込むフォントの設定をしていきます。

  1. 「CUSTOMIZE」クリック
  2. 導入したいフォントの太さを選ぶ

一般的なWebサイトでは、本文に使用する「regular」と、見出しや強調したい部分に使用する「bold」があれば事足りるかと思います。

何種類もWebフォントを使用すると、ページの読み込み速度が遅くなってしまいます。使いたいフォントの使いたい太さだけ読み込むようにしましょう!

STEP
フォントを読み込む

ここからは実際にフォントを読み込んでいきます。

  1. 「EMBED」をクリック
  2. HTMLを確認
  3. 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で設定したフォントの太さ(lightboldmediumなど)をプロパティに指定します。

STEP
Webフォントの設定完了!

これでWebフォントの導入は終わりです!

おすすめフォント

ここからは独断と偏見にはなりますが、個人的に好き(あるいは使いやすい)フォントを紹介します。日本語は8種類しかないので省略、英字のみのご紹介です。

Lato

無難で使いやすいデザインですが、丸みがあって柔らかい印象です。

Lato – Google Fonts

Exo 2

可読性・視認性共に高いフォントですが、横線が所々斜めのデザインで、一般的な英字フォントより少しだけおしゃれな印象です。

Exo 2 – Google Fonts

Paytone One

元々のフォントウェイトが太めなこともあり、見出しに使うとインパクト大。ポップなWebサイトや女性向けWebサイトに使用すると良さそうです。

Paytone One – Google Fonts

Montserrat

割といろいろなWebサイトで使用されています。「o」が正円で、かつフォントの全体的な幅が広めなので可読性が高く、大変使いやすいフォントです。

Montserrat – Google Fonts

さいごに

GoogleFontsを使用すれば簡単にWebページの印象を変えることができる他、デフォルトのフォントよりも読みやすいサイトを作成することも可能ですので、ぜひ一度試してみてください。

この記事が気に入ったら
フォローしてね!

この記事を書いた人

都内勤務のフロントエンドエンジニア。初心者の方向けにブログを更新中。webに萌えてもっと楽しく、もっと素敵に!

目次
閉じる