今回は弊社カスタマーサポートにも多く質問として寄せられている「サイトにGoogleフォントを設定したい」という要望を手軽に叶えることができるプラグインをご紹介します。WordPressでお気に入りのテーマを導入できた。しかしフォントの変更が上手くいかないという方はこのプラグインで是非実現していただけたらと思います。確かにフォントをサーバーにアップして、CSSを調整して…という手順は初心者には少し難しく感じてしまいますし、結果的に変更できなかったという方もいらっしゃるでしょう。ご紹介するプラグインはとても簡単に使えますので是非一度お試しください。

Easy Google Fonts

Easy Google Fonts の使い方

今回はコード変更一切不要でフォントを変更できるプラグイン「Easy Google Fonts」の紹介です。プラグインをインストール、有効化が済みましたら以下を参考に設定をお試しください。

WordPressのカスタマイザーを開きます

このプラグインは 管理画面 設定 > カスタマイズ から変更をしていきます。

Typography > Default Typography と進んでください。

変更したいフォントを設定していきます。

このプラグインでは、Paragraphs(P、本文)、h1、h2、h3、h4、h5、h6のフォントを調整可能です。

大きなフォント群を選んでからの方が、いろいろと迷う際は探しやすいかもしれませんが、AllSubsetsのままフォントを選択しても良いでしょう。フォントを選択するときは日本語から選択することで日本語のサイトにはよりピッタリなカスタマイズをすることができます。

12種類の日本語フォントから選んでみよう

Googleフォントには日本語フォントが現在12種類存在するようです。（2019年1月28日現在）

  • Noto Sans JP
  • Noto Sans TC
  • Noto Serif SC
  • M PLUS 1p
  • Sawarabi Mincho
  • Sawarabi Gothic
  • Noto Sans SC
  • M PLUS Rounded 1c
  • Noto Serif JP
  • Noto Serif TC
  • Kosugi Maru
  • Kosugi

Googleフォント（日本語）

右側のプレビューを見ながら選択しましょう


お好みのフォントを選択して「公開」を押すとサイトに反映されます。

フォントの細かいCSSまでここで設定できます

フォントを調整すると、テーマ本来のCSS調整からテキストの行間が詰まったりすることもありますがこのプラグインでは調整することが可能です。

Font size 文字の大きさを調整します。
Line Height 1行の高さを調整します。
Letter spacing 1文字ずつの横のスペースに影響します。小さくすると文字間が詰まります。

※テーマによりCSSの制限が掛かっているとこのプラグインの調整では公開状態に反映できないことがあります。
※TCDテーマはフォントサイズに関して、TCDテーマオプションの設定を優先するようにしておりますのでテーマオプションから変更してください。

まとめ

フォントはサイトの印象を変えるくらいデザインに影響力があるものです。よりサイトのイメージを自分の理想に近づけようと、気軽にフォントを変えようと思われるかもしれませんが、その影響範囲は想像以上となることがあります。慣れないうちはまず一部だけ変えてみるなどすると、感覚がわかりやすいかもしれません。とはいえこのような便利なプラグインがある以上、色々と試してみるのも発見があるでしょう。フォントの変更に挫折したことがある方は是非プラグインの導入をお試しください。