WordPress(ワードプレス)でgoogleフォントを入れる

wordpress

何かと便利なGooleフォント。日本語もやりたいところだが、まだ種類が少ないので今回はワンポイントとして、タイトルやロゴにGoogleフォントを使う方法を紹介。

Gooleフォントの使い方
  1. Googleフォントのサイトで使いたいフォントを選ぶ
  2. CSSをWordpress(ワードプレス)のテーマに記載する
  3. WordPress(ワードプレス)のスタイルシートにクラスを書く
Googleフォントのサイトで使いたいフォントを選ぶ
        1. まずは、Google Fontsから使用するフォントを選びます。
          使いたい文言(テキスト)をPreview Textに入れると使った場合のプレビューで見れるので、よりイメージに近いフォントを探せます。
      1. 気に入ったフォントが合ったら、Add to Collectionをクリック(下にストックされます)
      1. 更にReviewでサンプルをチェック(選んだフォントを全部使っても良いのですが、読み込みが凄〜く遅くなりますので、絞りましょう!)
      1. ParagraphとHeadlineでテキストで書いた時、タイトルで見た時の雰囲気が確認できます。今回はタイトル、ワンポイントで使うので、Headlineで。[colwrap]
        [col2][/col2]
        [col2][/col2]
        [/colwrap]
        決まったらUseボタン。さらに使うフォントスタイルの指定をします。この時メーターをチェックしながら、数を選びます。(緑で収まる様に)
CSSをWordpress(ワードプレス)のテーマに記載する

決まったら、そのまま下へスクロールして、Add this code to your website:の<link href〜>をコピーし、Wordpress(ワードプレス)のheader.phpの<head></head>内にペーストします。
決まったら、そのまま下へスクロールして、Add this code to your website:の@importをコピーし、子テーマのCSSににペーストします。(上記の方法だとアップデートされたPHPの恩恵が受けられなくなりますので。。。)

WordPress(ワードプレス)のスタイルシートにクラスを書く

次に使いたい部分ののクラスをブラウザの開発ツールで探します。
指定のクラスが見つかったら、フォント指定を加えてスタイルシートに書きます

[aside]基本的に子テーマに記載するように![/aside]