GoogleのWebフォントをWordPressテーマで使う方法

Googleが提供しているWebフォントを使うと、ブログやWebサイトの文字をちょっと変わったデザインに変更できます。用途が英語の部分のみに限られますが(日本語はあるけど動作が重くなる)、メニューや見出しなどピンポイントで使えば良いアクセントになるでしょう。ヘッダー部分に取り入れてロゴ入りヘッダーっぽくするのもありですね。

このWebフォントを、WordPressテーマでも利用する方法についてご紹介します。functions.phpに数行記述するだけのお手軽さ。

GoogleのWebフォント 適用までの手順

1. 使用したいフォント情報を取得する

Googleが提供しているWebフォントは数多く、それぞれ名前(フォント名)が付いています。以下のページを見ると、各フォント名ごとに表示される具合を確認できるので、この中から使用したいフォントを選びましょう。

GoogleのWebフォント一覧ページ
https://fonts.google.com/#

45439974-ff64-4a50-8207-305e90f50ef2

各フォント右上の+マークを押すと下の方に「1 Families Selected」と表示されるので、その右端にある「ー」マークをクリックすると、コードなどが表示されます。この中の太字になっている部分(下画像の場合「Open+Sans」ですね)をコピペしておいてください。

7c4ba118-53f7-4835-8f6d-617cef01449c

2. functions.phpに記述

上の情報を元に、以下の内容をWordPressテーマの「functions.php」内に追加。@@@の部分を消して、上でコピペしたものを貼り付けましょう。

function my_scripts() {
    wp_enqueue_style( 'google-webfont-style', '//fonts.googleapis.com/css?family=@@@' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

3. 適用したい場所のCSSを記述

これで、通常のフォントと同様にCSSの「font-family」でWebフォントの指定が可能となりました。

例えば記事の見出し(h2)にWebフォントを適用したい場合は、WordPressテーマの「style.css」内に以下のように記述します。

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

「font-family:〜」に何を書けばいいかも、先ほどのコードが表示されているページで確認できます。

4083574a-c307-4dc6-8c93-20325b4bd0f3

ここぞという時に使ってみよう!GoogleのWebフォント

GoogleのWebフォント一覧ページを見てもらえれば分かると思いますが、本当に大量のフォントが利用可能となっています。同じサイト上で同時に何種類でも利用できます。

ただ、あまり使いすぎるとサイト全体が重くなる(=表示速度が遅くなる)原因にもなりますので、ここぞ!という場所だけに使ってみてください。

ではでは。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA