Google Fontsの使い方。WordPressでテーマデザインのワンポイントに!

Google Fontsのフォント

WordPressテーマでGoogle Fontsを使う方法について質問を受けました。

とは言っても、僕自身も実はまだ使ったことがありませんでした。でも、質問に答えようと調べてみたら、意外と簡単に使えそうだったので、調べたことをメモ代わりに紹介です。

一度行って慣れてしまえば、次からは3分くらいで利用できるほど簡単なカスタマイズ手順です。

スポンサーリンク
レクタングル(大)広告

Google WEBフォントとは

そもそもWEBフォントとは、WWW上からフォントを表示する技術のことです。

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Webフォント – Wikipedia

CSS2まではサイトデザインに使用するフォントなどは、クライアント環境に依存する部分がありました。しかしCSS3からWEBフォントが採用されたことにより、デザイナーが自由にサーバー上に置いてあるフォントを利用できるようになりました。

Google WEBフォントとは、Googleサーバー上に置いてあるWEBフォントのことで、誰でも自由に利用することができます。

Google WEBフォントの使い方

グーグルフォントを利用するには、以下のわずか3手順で利用することができます。ユーザー登録なども必要ないので、使いたいときにそのまま使えます。

  1. 使用するフォントを選ぶ
  2. テーマでCSSを呼び出す
  3. CSSにスタイルを書く

とりあえず今回は、半角英数字のタイトルを変更するのを例にして使い方を紹介したいと思います。(Googleフォントには日本語のWEBフォントはありません。)

半角英数字のタイトル

1.使用するフォントを選ぶ

まずは、Google Fontsから使用するフォントを選びます。

デフォルトで、このようになっていると思いますが、フィルターのスクリプトはLatin(ラテン)を選択してください。

Google Fontsのフィルター

利用目的に合わせてタブを選ぶ

Google Fontsに行くと以下のような4つのタブがあります。

  • Word(単語)
  • Sentence(文)
  • Paragraph(段落、ひとまとまりの文章)
  • Poster(ポスター)

利用目的に合わせてタブを選ぶ

Word(単語)

ワードは、単語などの見た目を一覧で見るのに適しています。

ワード

Sentence(文)

センテンスは、一文を一覧で見るのに適しています。

センテンス

Paragraph(段落、ひとまとまりの文章)

パラグラフは、少し長めの文章のレイアウトを見るのに適しています。

パラグラフ

Poster(ポスター)

ポスターは、フォントのスタイルが適用されたフォント名が一覧で表示されます。

ポスター

フォントを決める

今回は、サイトタイトルの「Simplicity」という単語を変更するのでWordを利用し、「Preview Text:」と書かれている入力欄に「Simplicity」と入力します。

単語を入力

すると、フォントが適用された文字が一覧で表示されるので、その中から好みのデザインを選択します。

Googleフォント表示例

今回は例なので、変わったことがわかりやすいように「Yanone Kaffeesatz」を使ってみることにしました。

Yanone Kaffeesatz

2.テーマでCSSを呼び出す

次にテーマ側でCSSを呼び出します。

呼び出し用の、タグを取得するには「Quick-use」ボタンをクリックします。

フォントを選択する

クリックすると設定画面が表示されます。

設定項目は以下のようになっています。

Google Fontsの設定

使用したいフォントの太さを選択する

利用するフォントの太さを選択してください。太字も利用する場合は、Boldも選択してください。(Normalしか選択できないフォントもあります。)

Choose the styles you want

使用する文字セットを選択する

次に文字セットを選択します。ただ半角英数字の場合は、そのままのLatin(ラテン)でOKかと思います。

Choose the character sets you want

テーマにCSSを呼び出す

そして、テーマにCSSを呼び出します。呼び出し方法は、以下の3通りあります。

  1. Standard(HTMLで呼び出し用)
  2. @import(CSSで呼び出し用)
  3. JavaScript(JavaScriptで呼び出し用)

Add this code to your website

通常、テーマに呼び出す場合は、「Standard(HTMLタグ)」か「@import(CSSインポート)」でOKです。

Standard(HTMLタグ)で呼び出し

スタンダードで呼び出すには、header.phpの<head></head>の間にStandardタブにある以下のようなコードを挿入します。

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>

ただ、これだとheader.phpテンプレートをカスタマイズする必要があります。

@import(CSSインポート)で呼び出し

CSSインポートで呼び出すには、style.cssなどの先頭に@importタブにある以下のようなコードを挿入します。

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);

必ずstyle.cssの先頭部分に記入してください。CSSインポートで呼び出した方が、テンプレートを変更することなく手軽かもしれません。

子テーマ側のstyle.cssで呼び出す場合は、以下のようになったりします。

@charset "UTF-8";
@import url("../simplicity/style.css");
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);

3.CSSにスタイルを書く

最後に、style.cssなどにスタイルを記入します。

まずは、ブラウザの開発ツールなどでフォントを変更したい部分のCSSセレクタを確認します。(Chromeの場合は、変更部分の要素を右クリックして「要素を検証」を選択します。)

ブラウザの開発ツールでCSSセレクタをチェックする

あとは、取得したCSSセレクタと、Google Fontsで表示されていたプロパティーと値を利用します。

Integrate the fonts into your CSS

これらを合わせて記入すると、スタイルは以下のようになります。

#site-title a{
  font-family: 'Yanone Kaffeesatz', sans-serif;
}

動作確認

あとはブラウザなどで動作確認してみてください。

先程こんなだったのが、

半角英数字のタイトル

こんな感じになりました。

Google WEBフォント適用後のタイトル

通常のHTMLで利用する場合

通常のHTML適用する場合の例も書いておきます。

通常のHTMLからでも以下のように簡単に利用することができます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Google Fontsテスト</title>
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>
  <style type="text/css">
    h1{
      font-family: 'Yanone Kaffeesatz', sans-serif;
      font-size: 100px;
      color:#0062A0;
      text-shadow:10px 10px 6px #72777D;
    }
  </style>
</head>

<body>

<h1>Hello World!</h1>

</body>
</html>

WEBフォントなので、このように色変えたり、装飾も自由自在です。

Hello Worldロゴ

WEBフォントを使うメリット・デメリット

最後に、WEBフォントを使うメリットとデメリットを挙げておきます。これらを踏まえた上でご利用ください。

メリット

  • 画像を使うわけではなくテキストなのでSEO的にも有利
  • 画像じゃないのでコピペができてユーザーの利便性が良い
  • 画像じゃないので編集が簡単
  • 画像じゃないのでスタイルの変更も可能
  • どのブラウザでもサポートされている

デメリット

  • 日本語のWEBフォントは少ない(Google Fontsにはない)
  • ブラウザによっては若干表示に違いがある
  • サイズの大きなフォントだと読み込みに時間がかかる

まとめ

詳しく書いたのでページは長くなりましたが、Wordpressの場合、編集するところは2箇所ぐらいです。

1度これらの手順を行ってしまうと、次からは3分以内で行えるほど簡単です。

これまでは、やり方も見ないで「WEBフォントって何だか難しそう…」と思って使ったこともなかったのですが、「今度からは必要ならば使ってみよう!」と思うくらい手軽でした。