日本語でもOK!無料Webフォント「Google Fonts」の使い方

Google Fonts

強調や見出し、囲み枠などは CSS でデザインできますが、フォントを変更するのもおしゃれですよね。

でも、単純に font-family で指定しただけでは、ユーザーの環境によって見え方が異なってしまいます。画像にしてしまうのも一つの手ですが、それだと検索にひっかかりませんし、スマホビューをどうするかというのも考えなければなりませんよね。

そんなときは Web フォントを使ってみましょう。Google Fonts なら、誰でも簡単に無料で使えるのでおすすめです。

Webフォントとは

ブログ全体、または特定の箇所のフォントは CSS で指定することができます。

ブログ全体のフォントを指定するなら、このような感じですね。

body {
	font-family: "游ゴシック体", "メイリオ", sans-serif;
}

このとき、「游ゴシック体」がインストールされているパソコン(またはスマホ)でブログを見ると、游ゴシック体となります。

でも、「游ゴシック体」がインストールされていないときは、「メイリオ」が反映され、どちらもインストールされていないときは「sans-serif(ゴシック体)」が反映されます。

端末ごとにことなるフォント

フォントを指定しても、全ユーザーが同じ表示になるわけではない、ということですね。

Webフォントは全ユーザー同じ表示になる

通常はパソコンやスマホにインストールされているフォントが使われるわけですが、Web フォントは「フォントデータを提供する」ため、どの環境でも同じように表示されます。

『ここは何がなんでもこのフォントで表示させたい!』ときは重宝するでしょう。

ただ、フォントのデータ量はかなり大きい(とくに日本語)ので、表示が少し遅くなるというデメリットもあります。

速さとデザインを両立させるなら、一部のテキストのみ Web フォントを使うのがよいかもしれません。

Google Fontsの使い方

では、さっそく Google Fonts の使い方を見ていきたいと思います。

はじめに英数字のみで使えるフォント(日本語未対応)をご紹介しますので、サイト名「Naifix」に使うと仮定して進めていきます。

使いたいフォントを探す

Google Fonts 公式サイト
Google Fonts

Google Fonts にアクセスし、使いたいフォントを探します。

かなりの数があるので、イメージが固まっていないときは、右側のメニューからカテゴリー別や人気順などで絞り込むのがおすすめです。

ここでは、カテゴリーから Display を選択して出てきた Playball というフォントにしてみたいと思います。

Google Fonts - Display

カーソルを載せるとメニューが表示されので、ここで Custom を選択して実際の表示を確認してみましょう。

Playballの表示を確認する

「Naifix」と入力すると、こんな表示になりました。

Naifixロゴサンプル

なかなかいい感じですね。

このまま使いたいときは、右上の をクリックしてください。

アイコンが「-」に変わり、下部に Family Selected という黒いバーが出現するので、そこをクリック。

Google Fonts - Family Selected

フォントの使い方が出てきます。

Google Fonts 設定例

ブログで使えるよう設定する

ブログで Google Fonts を使うのは、そんなに難しくありません。

手順は、たった 2 つです。

  1. <head> 内にフォントを読み込むタグを設置する
  2. CSS で Google Fonts を指定する

まずはタグの設置からですね。

WordPress は、たいてい header.php を開けば <head> が見つかると思いますので、<head> ~ </head> のあいだにタグをコピペすれば OK です。

その他 HTML を編集できる無料ブログも、同様に <head> を探してコピペしてください。<head> 内であれば、場所はどこでもかまいません。

Google Fonts のタグをコピーし、

Google Fonts タグをコピーする

<head> ~ </head> のあいだに貼り付け。

Google Fonts タグを貼り付け

あとは CSS で指定するだけです。

「@IMPORT」という方法も選択できますが、こちらは表示速度が遅くなる可能性があるので、とくに理由がなければ「STANDARD」で提示されている <link> を使いましょう。

CSS設定例

CSS は、通常のフォント指定と同じく font-family を使えば OK です。

先ほどの Family Selected 内に「Specify in CSS」として設定例が載せられているので、これをそのまま使いましょう。

Google Fonts font-family指定例

フォントを指定して、文字を通常の 2 倍サイズにするとこんな感じになります。

Sample

■ HTML 例

<span class="gf-nfx-logo">Naifix</span>

■ CSS 例

.gf-nfx-logo {
    font-family: 'Playball', cursive;
    font-size: 2em;
}

色を変更したり、テキストシャドウをつけるのもよいですね。

Sample

Naifix

■ HTML 例

<span class="gf-nfx-logo">Naifix</span>

■ CSS 例

.gf-nfx-logo {
    font-family: 'Playball', cursive;
    font-size: 2em;
    color: #c03;
    text-shadow: -1px 1px 0 rgba(0,0,0,.6);
}

 CSSで区切り線と文字に1pxの影をつけるとかっこいいデザインに!

英数字だけなので使えるところは限られてきますが、更新日などに使うのもおしゃれかなと思います。

Sample

Google Fonts + 日本語早期アクセスの使い方

日本語対応の Web フォントは、「Google Fonts 日本語早期アクセス」で使えます。

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

使い方は、通常の Google Fonts と同じです。

使いたいフォントを探す

2017 年 5 月現在、フォントは 9 種類のみ。

  • M+ 1p
  • Rounded M+ 1c
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニクキュウ
  • ニコモジ
  • Noto Sans Japanese

ここでは、「はんなり明朝」を使ってみたいと思います。

Google Fonts はんなり明朝

タグと CSS 設定例は右側に表示されているので、これをコピペして使ってください。

Google Fonts はんなり明朝タグ例

先ほどと同じく、<head> 内に <link> をコピペし、CSS で指定します。

CSS設定例

本文内の見出しにのみ「はんなり明朝」を使うなら、以下のように font-family を追記するだけです。

※使っているテーマ・テンプレートによって指定方法が異なります

h2 {
    font-family: "Hannari";
}

注意書きのようなボックスを作成し、その中のみフォントを変更すると目を引くかもしれませんね。

Sample

■ HTML 例

<div class="gf-nfx-hnr">テキスト</div>

■ CSS 例

.gf-nfx-hnr {
    font-family: "Hannari";
    color: #fff;
    background-color: #f05f5f;
    padding: 1em;
}
<html> や <body> に font-family を指定すればブログ全体のフォントを変更できますが、明朝体を読みづらいと感じる方もいるので注意しましょう。

CSSで作るおしゃれなボックス(囲み枠)のデザインサンプル13パターン と組み合わせて使うのもおすすめです。

まとめ

以上、Google Fonts の使い方と設定例でした。

『ここはもっとおしゃれな書体にしたい。でも画像はイヤ』というときは、ぜひ試してみてください。

ブログを自分好みにカスタマイズしてモチベーションが上がれば、記事ネタが次々に浮かんでくるかもしれませんよ。

それでは、また。

Author

Naifix 編集部
Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。当サイト(Naifix)では、おもにブログ初心者向けのノウハウを無料で配信しています。