【2017年版】Google Fontsの使い方:初心者向けに解説!

HTMLで改行する方法

今回は便利なGoogle Fonts(グーグル・ウェブフォント)の導入方法と使い方をまとめていきます。HTMLとCSS初心者の方でも分かるように丁寧に解説していきます

1. Google Fontsとは?

google fontの画面

完全無料でWebフォントを使用できるサービスのことです。商用利用でも無料です。

1-1. Webフォントとは?

サーバーのイメージ

サーバーからフォントデータを読み込んで、ブログやWebサイトに表示させる仕組みのことです。

通常のフォントだと…

通常のフォントの場合

通常のフォントの場合、Webページを閲覧する端末にインストールされているフォントしか表示させることができません。

WindowsかMacかiPhoneかAndroidかによって標準搭載されているフォントも異なるため、統一した文字を表示させることができないわけですね。

Webフォントなら…

webフォントの場合

一方でWebフォントであれば、サーバーから読み込むため、どの端末でも共通のフォントを表示させることができます。

1-2. ページの読み込み速度は遅くなる?

使用するフォント種類が増えるほど重くなります。とはいえ、Googleの高速サーバーから読み込むことができるので、数種類のフォント使用であれば気にならないはずです。

1-3. Google Fontsに日本語はあるの?

Google Fontsは英語が中心です。

Google Fonts + 日本語 早期アクセス  Google Fonts + Japanese Early Access

Google Fonts日本語早期アクセスで試用的に9種類の日本語フォントを使うことができるのですが、ものすごーく重いです。数MB〜数十MBというとてつもない重さのファイルになってしまうこともあります。

日本語はひらがな・カタカナに加えて無数の「漢字」まで読み込まなければならないため重くなるわけですね…。読み込みを早くするテクニックはありますが、それでもある程度は読み込みが遅くなってしまうので現時点ではあまりおすすめしません。

英語はGoogle Fonts、日本語は通常の指定が理想

個人的な意見ですが「日本語は通常のフォントを使い、アルファベットだけWebフォントで表示させる」というように組み合わせるのがベストかと思います。これだけでも十分に見栄えは華やかにできます。
フォント(font-family)の指定の仕方はこちらの記事で詳しく解説しています。

2. Google Fontsの使い方

ここからはGoogle Fontsの導入手順と使い方を解説していきます。

手順1. 利用ページにアクセス

まずはこちらのページを開きましょう。Google Fonts

google fontの画面

利用できるフォントがずらっと表示されます。下にスクロールすればフォントがどんどん表示されます。

この中から使いたいフォントを選びます。フォントの探し方については後ほど説明します。とりあえず導入手順をちゃちゃっと解説しちゃいます。

手順2. 使用するフォントを選ぶ

使いたいフォントの+をクリック

使いたいフォントがあったときは右上のをクリックします。

画面の下側に追加済みのフォントが表示

すると画面下側のリストの中に追加されます。使いたいフォントが複数あるときはそれもで追加しましょう。

をクリックすれば削除することができます。

手順3. 太さなどのスタイル設定をする

設定ウィンドウを開く

追加が済んだら、画面下の黒いバーの「-」をクリックしましょう。これで追加した文字の設定ウィンドウが開きます。

上に使用フォント一覧が表示

ウィンドウの上部には追加されているフォントが一覧で表示されます。

customizeをクリック

その下にある[CUSTOMIZE]をクリックします。ここで太字や斜体を使うかどうかを決めることができます。

太字や斜体を使いたければチェックを入れる

初期設定では普通の大きさのフォントしか使わない設定になっています。太字や斜体を使いたい場合は、使いたいスタイルにチェックを入れます。

スタイル数が多くなるほど読み込みデータが重くなるので、本当に使うものにだけチェックを入れましょう。

手順4. HTMLにフォントの読み込みコードを貼る

embedをクリック

スタイル設定ができたら[EMBED]をクリックします。

link rel〜をコピー

下側に<link rel...というコードが載った部分があるはずです。これをまるっとコピーします。

コピーしたコードは<head></head>の中のどこかに貼ります。ただしブログサービスによって貼り方は少し異なります。

link rel〜を貼る場所

  • WordPress:[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php]⇒headタグ内
  • はてなブログ:[設定]⇒[詳細設定]⇒[headに要素を追加]の枠内にコードを貼付け
  • Livedoorブログ:[ブログ設定]→[PC]→[カスタマイズ]→[HTMLファイル]⇒headタグ内
  • FC2ブログ:[設定]⇒[テンプレートの設定]⇒[◯◯のHTML編集]⇒headタグ内
  • Blogger:[テンプレート]⇒[HTMLの編集]⇒headタグ内

【参考】CSSから読み込む場合

HTMLをいじらずにCSSから読み込むこともできます。その場合は@importをクリックして表示されるコードをまるっとコピーしてCSSファイルのどこかに貼りましょう(@charset〜のすぐ下で良いかと思います)。

cssで読み込みたいとき

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

あとはCSSでfont-familyに使いたいフォント名を記載するだけです。もう一度Google Fontsに戻ります。

フォント名のチェック

ウィンドウの下側にある「font-family:’◯◯’」というところでフォント名が確認できます。これをコピーしてfont-familyに追加します。

font-familyの指定の仕方

こちらの記事を参考にすると良いかと思います。

もしCSSにfont-family:〜が書かれている場合、その中の1番先頭にフォント名を貼り付けます。

body {font-family: ‘Quicksand’, ‘ヒラギノ角ゴシック’, ‘メイリオ’ ,sans-serif;}

ページ全体にWebフォントを使いたい場合はbody {font-family: 'フォント名',...}というように書きます。見出しにだけ使いたい場合などはh2 {font-family: 'フォント名',...}というように書きます。

サルワカくんの顔(通常)
サルワカくん

これらのWebフォントは日本語を表示できないので、日本語のフォント名と合わせて書くのがおすすめです。

手順6. 表示される!

Webフォントが表示される

これで導入完了です。ページを読み込めばWebフォントが表示されるようになります。参考:CSSのデザイン変更が反映されない時の対処法

【参考】太字で表示させたいときは?

Webフォントを太字で表示させたいときにはCSSで指定をします。font-family:〜;と合わせてfont-weight:boldと書けば太字で、font-weight:lighterとすれば細字で表示されます。詳しくはこちらの記事が参考になるはずです。

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

Google Fontsにはたくさんの種類のWebフォントが登録されています。目的に合ったフォントを効率的に探せるようにフィルターを使いこなしましょう。

画面右上の虫メガネをクリック

まず、画面右上の虫メガネのアイコンをクリックします。

検索用メニューが表示される

すると検索のフィルターメニューが表示されるようになります。1つずつ見ていきましょう。

3-1. 書体でフィルターをかける

書体でフィルターをかける

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

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

3-2. 太さや斜体でフィルターをかける

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

太さなどでフィルターをかける

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

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

人気順に並べる

[Sorting]を変えることで並び順を変更することができます。

  • Trending:トレンドのものから表示
  • Popular:人気順で表示
  • Date Added:新着順で表示
  • Alphabetical:アルファベット順で表示

4. 例文の表示を変更する

Google Fontsではフォントごとにサンプル文字列が表示されています。この文字列は簡単にカスタマイズできます。

4-1. 文字列を変える

サンプル文章を変える

変えたい文字列にカーソルを当て、Deleteを押せば消えます。そのまま試したい文字を入力すればOKです。

4-2. 変えた例文を全フォントに適用

全種類に同じ例文を適用

全例文を統一した方が比較しやすいですね。[APPLY TO ALL FONTS]をクリックすれば、全例文が同じ文字列になります。

4-3. 段落文で表示

段落で表示

初期設定では見出しっぽく例文が表示されています。[Sentense]をクリックして[Paragraph]を選べば、例文を段落文に変えることができます。

4-4. サンプル文字の大きさを変更

大きさを変える

◯◯pxと表示されている部分のつまみを調整することで表示される文字の大きさを変えることができます。

4-5. 太さを変更

その左隣にある[Regular400]というところからはサンプル文字の太さを変えることができます。

最後に

Google Fontsをうまく使えばユニークでオシャレなWebサイトに見せることができます。とはいえ「オシャレ=読みやすい」ではないので、読ませたい部分で使うときには注意が必要ですね。

サルワカ