【簡単】wordpressで本文に日本語のgooglefontsを導入する方法

wordpressでサイトを制作してみたけど、フォントが崩れてて読みづらい・・・明朝体とか日本語のgoogleのフォントを入れたいけど、素人なのでどうやって導入したらいいかわからない・・・・

wordpressでサイト制作を任されると、フォント修正で躓くことがありますよね。そこで今回は、プログラミングに関してあまり詳しくない人でも簡単にwordpressのフォントを変更する方法を紹介したいと思います。

webフォントとは??

まず、導入する前にwebフォントについて知る必要があります。webフォントはこちらの記事が詳しいので読んでみてください

日本語Webフォントとは、何がすごいのか?メリットを徹底解説!

要は、スマホ、パソコン、タブレットなどどんな端末でも同じフォントが適用されるのがwebフォントの最大の長所です。

パソコンではきいていたフォントがスマホだと効かないなんてことはcssをいじっているとよくありますが、webフォントを設定しておけばそういうことは一切ありません。

そして、現在webフォントの代表格であるgooglefontsでは、以下の日本語フォントが登録されています。

現在導入できるgooglefonts日本語は9種類!!

  • M+ 1p
  • Rounded M+ 1c
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニクキュウ
  • ニコモジ
  • Noto Sans Japanese

現在登録できる日本語のフォントは上の9種類です。英語ほど種類はありませんが、明朝体など基本的なフォントは揃っています。詳しくはこちらをご覧ください。

グーグルフォント

以下導入方法をまとめます。本当はグーグルフォント日本語早期アクセスのサイトを見るのですが、本家が少しわかりづらい上にコードがコピーできなかったりするので、こちらでまとめてみました。導入方法①のほうが簡単ですが、うまくいかなかったら導入方法②を試してみてください。

導入方法~追加cssに以下のコードをそのまま添付

まずは、ワードプレスの追加cssにコードをそのまま添付して導入する方法です。まずは上のカスタマイズをクリックしてください。

続いて、「追加css」をクリック

以下のように、追加cssの一行目にコードを添付してください。ここで一行目に追加しないとwebフォントが機能しません。

実際に添付するコード

以下、フォントごとにどのコードを貼ればいいかまとめました。自分の使いたいフォントを追加cssの先頭に丸々コピペしてください。(画像はグーグルフォント日本語早期アクセスより引用)

①M+1p

②Rounded M+ 1c 

 

③はんなり明朝

④NotoSansJapanese

⑤こころ明朝

⑥Nikukyu(にくきゅう)

⑦NikoMoji(にこもじ)

⑧さわらび明朝

 

⑨さわらびゴシック

何度も言いますがこれらのコードは全て追加cssの先頭に書き込まないと機能しません。もし機能しない場合は、コードが先頭に書かれているかどうか確認してください。

以上googlefont日本語の設定方法でした!