メニュー

Googleフォントの設定方法

※functions.phpを変更しますので、修正する前に必ずバックアップをとってから始めてください

Googleフォントに行き、使いたいフォントを選びます。(ここではNoto Sans JPを選んでいます)

HTMLと書かれた””の中にあるURL部分をコピーします。

 

ワードプレスの「外観」→「テーマエディター」から「functions.php」を開きます。

 

先程コピーしたGoogleフォントを貼り付けておきます。

 

次に、以下の記述をコピーして貼りつけます。

$data[‘font_urls’][”] = ”;

 

フォントの種類をコピーして以下のように貼り付けます。(Noto Sans JPの場合は「Noto+Sans+JP」がフォントの種類です)

 

現時点で以下のようになっていればOKです。

$data[‘font_urls’][‘Noto+Sans+JP‘] = ”;

フォントURL全てを以下の部分に貼り付けます。

 

以下のようになっていれば、「ファイルを更新」してfunctions.phpの設定は完了です。

$data[‘font_urls’][‘Noto+Sans+JP‘] = ‘https://fonts.googleapis.com/css?family=Noto+Sans+JP‘;

次に、再度Googleフォントを開き、font-familyのフォントの種類をコピーします。

 

スタイルシートを開きます。

 

font-familyの部分にフォントの種類を貼り付けます。このときを記述して、その中に貼り付けます。その後ろに,も記述します。以下のように記述してあればOKです。記述したらファイルを更新します。

 

次に、AMPページのfont-familyも修正します。ampの中にあるstyle.phpを開きます。

 

先程と同じように、font-familyの中にフォントの種類を記述します。ファイルを更新して、これで全ての設定が完了です。

 

メイリオフォントから、

Noto Sans JPフォントに変わりました。

これで完了です。

この要領で、他のフォントも変更することができます。ですが、Googleフォントの日本語は読み込み容量が多いのでページ速度は低下します。ページ速度を気にする場合は、日本語フォントではなく、英語フォントのみ変更すると良いと思います。