強調や見出し、囲み枠などは CSS でデザインできますが、フォントを変更するのもおしゃれですよね。
でも、単純に font-family で指定しただけでは、ユーザーの環境によって見え方が異なってしまいます。画像にしてしまうのも一つの手ですが、それだと検索にひっかかりませんし、スマホビューをどうするかというのも考えなければなりませんよね。
そんなときは Web フォントを使ってみましょう。Google Fonts なら、誰でも簡単に無料で使えるのでおすすめです。
Headline
Webフォントとは
ブログ全体、または特定の箇所のフォントは CSS で指定することができます。
ブログ全体のフォントを指定するなら、このような感じですね。
body {
font-family: "游ゴシック体", "メイリオ", sans-serif;
}
このとき、「游ゴシック体」がインストールされているパソコン（またはスマホ）でブログを見ると、游ゴシック体となります。
でも、「游ゴシック体」がインストールされていないときは、「メイリオ」が反映され、どちらもインストールされていないときは「sans-serif（ゴシック体）」が反映されます。
フォントを指定しても、全ユーザーが同じ表示になるわけではない、ということですね。
Webフォントは全ユーザー同じ表示になる
通常はパソコンやスマホにインストールされているフォントが使われるわけですが、Web フォントは「フォントデータを提供する」ため、どの環境でも同じように表示されます。
『ここは何がなんでもこのフォントで表示させたい！』ときは重宝するでしょう。
ただ、フォントのデータ量はかなり大きい（とくに日本語）ので、表示が少し遅くなるというデメリットもあります。
速さとデザインを両立させるなら、一部のテキストのみ Web フォントを使うのがよいかもしれません。
Google Fontsの使い方
では、さっそく Google Fonts の使い方を見ていきたいと思います。
はじめに英数字のみで使えるフォント（日本語未対応）をご紹介しますので、サイト名「Naifix」に使うと仮定して進めていきます。
使いたいフォントを探す
Google Fonts にアクセスし、使いたいフォントを探します。
かなりの数があるので、イメージが固まっていないときは、右側のメニューからカテゴリー別や人気順などで絞り込むのがおすすめです。
ここでは、カテゴリーから Display を選択して出てきた Playball というフォントにしてみたいと思います。
カーソルを載せるとメニューが表示されので、ここで Custom を選択して実際の表示を確認してみましょう。
「Naifix」と入力すると、こんな表示になりました。
なかなかいい感じですね。
このまま使いたいときは、右上の をクリックしてください。
アイコンが「－」に変わり、下部に Family Selected という黒いバーが出現するので、そこをクリック。
フォントの使い方が出てきます。
ブログで使えるよう設定する
ブログで Google Fonts を使うのは、そんなに難しくありません。
手順は、たった 2 つです。
- <head> 内にフォントを読み込むタグを設置する
- CSS で Google Fonts を指定する
まずはタグの設置からですね。
WordPress は、たいてい header.php を開けば <head> が見つかると思いますので、<head> ～ </head> のあいだにタグをコピペすれば OK です。
その他 HTML を編集できる無料ブログも、同様に <head> を探してコピペしてください。<head> 内であれば、場所はどこでもかまいません。
Google Fonts のタグをコピーし、
<head> ～ </head> のあいだに貼り付け。
あとは CSS で指定するだけです。
<link> を使いましょう。CSS設定例
CSS は、通常のフォント指定と同じく font-family を使えば OK です。
先ほどの Family Selected 内に「Specify in CSS」として設定例が載せられているので、これをそのまま使いましょう。
フォントを指定して、文字を通常の 2 倍サイズにするとこんな感じになります。
Naifix
■ HTML 例
<span class="gf-nfx-logo">Naifix</span>
■ CSS 例
.gf-nfx-logo {
font-family: 'Playball', cursive;
font-size: 2em;
}
色を変更したり、テキストシャドウをつけるのもよいですね。
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の影をつけるとかっこいいデザインに！
英数字だけなので使えるところは限られてきますが、更新日などに使うのもおしゃれかなと思います。
Last Update : 2017.05.01
Google Fonts + 日本語早期アクセスの使い方
日本語対応の Web フォントは、「Google Fonts 日本語早期アクセス」で使えます。
使い方は、通常の Google Fonts と同じです。
使いたいフォントを探す
2017 年 5 月現在、フォントは 9 種類のみ。
- M+ 1p
- Rounded M+ 1c
- はんなり明朝
- こころ明朝
- さわらび明朝
- さわらびゴシック
- ニクキュウ
- ニコモジ
- Noto Sans Japanese
ここでは、「はんなり明朝」を使ってみたいと思います。
タグと CSS 設定例は右側に表示されているので、これをコピペして使ってください。
先ほどと同じく、<head> 内に <link> をコピペし、CSS で指定します。
CSS設定例
本文内の見出しにのみ「はんなり明朝」を使うなら、以下のように font-family を追記するだけです。
※使っているテーマ・テンプレートによって指定方法が異なります
h2 {
font-family: "Hannari";
}
注意書きのようなボックスを作成し、その中のみフォントを変更すると目を引くかもしれませんね。
■ HTML 例
<div class="gf-nfx-hnr">テキスト</div>
■ CSS 例
.gf-nfx-hnr {
font-family: "Hannari";
color: #fff;
background-color: #f05f5f;
padding: 1em;
}
CSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターン と組み合わせて使うのもおすすめです。
まとめ
以上、Google Fonts の使い方と設定例でした。
『ここはもっとおしゃれな書体にしたい。でも画像はイヤ』というときは、ぜひ試してみてください。
ブログを自分好みにカスタマイズしてモチベーションが上がれば、記事ネタが次々に浮かんでくるかもしれませんよ。
それでは、また。