【2020年版】Google Fonts(Webフォント)の使い方

18,433view

【2020年版】Google Fonts(Webフォント)の使い方

今やWebサイトやブログを作る際、デザインのクオリティを上げるのに欠かせなくなったWebフォント
今回は、Google Fonts(グーグルのWebフォント)の基本的な使い方を解説していきます。

GoogleFontsは完全無料でWebフォントを使用できるサービスのことです。商用・非商用に関わらず誰でも無料でしようすることができます。

本記事の内容

  • Google Fonts(Webフォント)のダウンロード方法
  • WebサイトでGoogle Fonts(Webフォント)を使う方法

大きく上記の2つに分けて解説していきます。

Google Fonts(Webフォント)のダウンロード方法

Webサイトやブログをデザインするときにも使うと思いますので、まずはGoogle Fontsのダウンロードから解説していきます。

Webフォントといわれていますが、普通にIllustratorやPhotoshopなど、紙のデザインをするときでもフォントとしても使えるのでオススメです。

手順1.公式ページを開く

まずはこちらのGoogleFontsの公式ページを開きましょう。

フォントがたくさん表示されると思います。スクロールしていくとさらに表示されます。

手順2.ダウンロードしたいフォントを選ぶ

使いたいフォントがあったらクリックします。

手順3.ダウンロード方法

ダウンロードする場合は右上のDownload familyをクリックするとダウンロードできます。

ダウンロードができたら、自分のパソコンにインストールしましょう。

パソコンにフォントをインストールする方法

フォントをダウンロードする方法は以上です。思ったより簡単ですよね。フォントの探し方などはまとめて最後に解説します。

WebサイトでGoogle Fonts(Webフォント)を使う方法

手順1.公式ページを開く

先ほどのダウンロード同様にGoogleFontsの公式ページを開きます。

手順2.Webフォントで使用したいフォントを選ぶ

使いたいフォントがあったらクリックします。

手順3.フォントの使いたいstyle(スタイル)を選択します。

使いたいウエイト(フォントの太さ)を選び、右側の+Select this style(選択する)をクリックします。(複数選択することもできます。)
※斜体文字にしたい場合はitalicを選択

クリックすると-Remove this style(選択を外す)に切り替わります。

右上のアイコンを押してこのように表示されたら選択されています。

手順4.Webサイトに埋め込む

Embedをクリックすると下記に切り替わります。

上記の<link href〜の部分をコピーします。

コピーしたコードは自分のサイトの<head>〜</head>内に貼り付けます。

手順5.CSSでfont-familyを指定

あとはCSSでfont-familyに使いたいフォント名を記載するだけです。
先ほどの画面の下記の部分をコピーします。

コピーできたらCSSに指定します。

H2などの見出しに使用した場合の例

h2 {
 font-family: 'Roboto', sans-serif;
}

※英語のWebフォントは日本語を表示できないので、日本語のフォント名も合わせて書いておく方がいいでしょう。

これでサイトにWebフォントが表示されるようになります。

太字や斜体でさせたいときは?

太字で表示させたいときは、font-weight:700を一緒に指定しましょう。

h2 {
 font-family: 'Roboto', sans-serif;
 font-weight:700;
}

斜体で表示させたいときは、font-style:italicを一緒に指定しましょう。

h2 {
 font-family: 'Roboto', sans-serif;
 font-style: italic;
}

※上記の太字や斜体は手順3のフォントを選ぶ際に700やitalicを選んでおく必要があります。

効率的なWebフォントの探し方

Google Fontsにはたくさんの種類のWebフォントがあります。目的に合ったフォントを効率的に探せるようにGoogle Fontsに用意されているソート機能を使いこなしましょう。

書体でソートする

SerifやSans Serifのチェックを外すことで「明朝体のフォントだけ表示させる」というようなことができます。

Serifは明朝体、Sans Serifはゴシック体、Displayは装飾のある文字、Handwritingは手書き文字、Monospaceは1文字の幅が全て同じフォントのことです。

太さや斜体でソートする

フォントによって太字や斜体の数が異なります。太さを7種類から選べるフォントもあれば、太字を全く使うことのできないフォントもあります。
以下の4つのフィルターを使うことで「ものすごく太いフォントだけ表示させる」ようなことができます。

  • Number of styles:指定できるスタイルの数(太字と斜体の数)。
  • Thickness:太さ。右につまみを動かせば太字のものだけ表示、左に動かせば細字だけ表示
  • Slant:斜体。右につまみを動かすと斜体フォントだけが表示。右ほど斜め具合が強くなる
  • Width:文字幅。左につまみを動かすと幅の小さいものだけ表示、右に動かすと幅の大きいものだけ表示

人気順や新着順で並び替える

人気や新着で並び順を変更することができます。

  • Trending:トレンドで表示
  • Most popular:人気順で表示
  • Newest:新着順で表示
  • Name:アルファベット順で表示

まとめ

Google Fontsをうまく使えばWebサイトのクオリティを上げることができます。
ただWebフォントの多用はかえってサイトの表示スピードを遅くする原因になるため多用は避けましょう

特に日本語のWebフォントは、英語のWebフォントに比べて文字の種類が多い(漢字・ひらがな・カタカナなど)ので、遅くなります。ウエイト(フォントの太さ)が増えるとさらに重くなるため、日本語フォントは1つに絞ってフォントのウエイトも最高でも3つに抑えておきましょう。(400,500,700など)

Google Fontsをフルに活用してサイトにあったフォントを選び、最高のWebサイトを作っていきましょう。
少しも参考になれば幸いです。

この記事をシェアする