DiverのフォントをNoto Sans JPにカスタマイズする2つの方法

このブログでは、ワードプレスの有料テーマ「Diver」を使っていますが、デフォルトでは「遊ゴシック」というフォントになってるんですよね。

最近のブログでは色んなフォントを見かけるようになりましたが、このブログのフォントも変えたい！

というわけで、Diverカスタマイズ第1回目となる今回は、

Diverの初期フォント「遊ゴシック」を、人気のグーグルフォント「Noto Sans JP」に変更する、の巻です。

遊ゴシックはスマートで読みやすいけど…

Diverに初期設定されてたのは「遊ゴシック」。

最近ワードプレスをビジュアルエディタで書き始めた私には、見やすくてスマートなのはわかるけど、

ちょっと真面目じゃない？

いや、真面目というよりスマートか。

万人受けするきちっとした読みやすさ。

仕事もプライベートも、そつなくこなすエリートマン風（さらにイケメン）。

 

悪くないよ、ちっとも悪くなんかない。

でももう少しだけ、親しみやすさが欲しい！

人気のグーグルフォント【Noto Sans JP】とは？

web上で表示されるフォントには様々な種類が溢れてるけれど、フリーフォントだとデバイスによっては表示されなかったりすることも。

そこで、色んなサイトで見かけるようになったwebフォント【Noto Sans JP】に変更することにしました。

引用：Google Fonts + Japanese

【Noto Sans JP】は、googleとAdobeが共同で開発したフォントで、他にも色んな種類があるんですが、フォント名に「Noto」と付けられています。

どうやらデバイス上で文字化けした際に、代わりに表示される四角（□）がネットスラングでは豆腐と呼ばれているらしく、

【どんな言語でも（□）で表示されないような（文字化けしない）フォントを開発しよう】という思いを込めて、

「No more 豆腐（tofu）」⇒「Noto」

と名付けたのだとか。

（開発者が豆腐嫌いだっただけじゃないことを願うよね。）

元々は「Noto Sans Japanese」という早期アクセス版がでてたのですが、「Noto Sans JP」はその正式版ということで公開されています。

webフォントに変更するデメリット

webフォントを外部から読み込む場合、デフォルトのフォントを使用するより表示速度が遅くなる、というデメリットがあります。

サイトの表示速度は大事。

ですが、早期アクセス版（Noto Sans Japanese）に比べて、正式版の【Noto Sans JP】は比較的軽量化されているということで変更に踏み切ることにしました。

Noto Sans JPに変更するカスタマイズ方法は？

Noto Sans JPへのフォント変更方法はweb上でもいくつか紹介されていますが、ここでは2つの方法をご紹介します。

…とその前に。

カスタマイズする時に、以下の点はお忘れなく。

header.phpファイルにコードをコピペする

一般的なカスタマイズ方法といえばこちらになるのではないでしょうか。

まずは、google fontfa-external-linkにアクセスしてNoto Sans JPのコードを取得します。

使用したいフォント（今回はNoto Sans JP）を選び、画面右上あたりに表示されているSELECT THIS FONT（+マーク）をクリックすると、画面右下に黒いバーがでてくるので、そちらをクリック。

light300も試してみましたが、薄すぎる感じがしたので、regular400にチェック。

EMBEDをクリックすると、コードが表示されるので、まるっとコピペ。

Diverには最初から子テーマが用意されていますが、header.phpはありませんので、FTPソフト（FileZillaを使っています）で子テーマに複製してからコピペしました。

後々わかりやすいように、</head>直前に貼っています。

CSSでfont-familyを指定する

header.phpにコードを貼り付けたら、子テーマのstyle.cssに戻って、font-familyの指定入力を行います。

/*Noto Sans JPを指定 */
body{
	font-family: "Noto Sans JP",sans-serif;
}

ページ全体にフォントを指定したいので、body に書いていますが、場所の指定をすることも可能です。

style.cssに追記するだけでNoto Sans JPに変更する方法

カスタマイズはしたいけど、functions.phpとかheader.phpはなるべく触りたくない。

その気持ち、よくわかります。（うんうん）

その場合には@importを使う方法で。

※@importは使いたくない、推奨しないという意見もあります。

先ほどのグーグルフォント（Noto Sans JP）fa-external-linkに戻ります。

※<style></style>ごと貼り付けたらエラーになったので、以下のコードだけ抜き出しました。

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

このコードを、「外観」→「テーマエディター」からdiver_child:スタイルシート(style.css)に追記していくんですが、どうせならfont-familyの指定も一緒にしちゃったほうがいいですよね。

なので、スタイルシートには以下のコードを追記しました。

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

body{
	font-family: "Noto Sans JP",sans-serif;
}

デフォルトで入力されている/* カスタマイズする場合にはこれより下に追記してください */の直後に貼り付けています。

（変更されないようなら、キャッシュクリア）

フォントが少し太めな分、文字の色が黒では重たいので、カスタマイザー（外観→カスタマイズ）の基本カラーで、文字色が＃333だったところ全て、＃666666に変更してあります。

文字間も気になったので段落スペースを変更

Noto Sans Jpの太さ400にしたことで、段落スペースがわかりにくく、全体的に文章が詰まってしまった感があったので、

「Diverオプション」→「投稿設定」から、段落スペースを変更しました。

フォントサイズも（PC）16px、（SP）15pxに変更してみました。

こういう調整が簡単にできちゃうのもDiverの魅力の一つですね！