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

何かと便利な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で。
        決まったら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(ワードプレス)のスタイルシートにクラスを書く
次に使いたい部分ののクラスをブラウザの開発ツールで探します。 指定のクラスが見つかったら、フォント指定を加えてスタイルシートに書きます
基本的に子テーマに記載するように!

ABOUTこの記事をかいた人

1998年からWEB関連の仕事に従事。角川グループのWEB会社に入社し、ディレクター、デザイナーとして経験を積む。2004年よりフリーランスとして活動し、2008年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。