【WordPress】Webフォントを使用する

※「 Twenty Nineteen 」を使っていた時の記事です。

このサイトのWordPressのテーマはTwenty Nineteenです。

私はWidowsを使用していて、メイリオが適用されます。

メイリオも読みやすいんですが、Noto Sans JPが気に入っているので変えようとしました。

しかしテーマエディターを開いたはいいものの、PHPを全く知らないのでどこを変えればいいのか分かりません(- -)

少し考えて解決しましたので、備忘録として書きます。

今回はサーバーにファイルを置かず、Webから読み込む方法で進めます。
フォントは全体に適用させます。

この手順で説明します。

Webフォントを読み込むURLをテーマヘッダーに記述する

使いたいフォントを読み込むURLを取ってきます。

今回のNoto Sans JPはGoogle Fontsで提供されいます。

これをコピーしてテーマヘッダーに貼り付けます。

WordPressのダッシュボードを開き、「外観」→「テーマエディター」を開きます。

テーマファイルの項目からテーマヘッダーを探し、クリックします。

移動した左のHTML内のHead要素の中に、リンクを貼り付けます。

「ファイルを更新」をクリックします。

これで読み込みは完了です。

style.cssから探してもいいですが、簡単なのはブラウザの開発者ツールの「検証」です。

変えたい文字――例えば本文を右クリックして「検証」をクリックすると、その要素のプロパティが見れます。

そこからfont-famiryを適用しているセレクタを見つけてコピーします。

「外観」→「カスタマイズ」→「追加CSS」を開きます。

「追加CSS」に先程コピーしたセレクタを貼り付けます。

あとはfont-famiryを指定するだけです。

お疲れさまでした！

この方法だとWordPress本体が更新される度にGoogle FontsのURLが消えてしまいます。

子テーマにすると大丈夫らしいですが、私は全然分かりません(^^;)

プラグインも簡単なのがあるみたいで、そちらを利用するのもいいですね。

テーマによっては「外観」→「カスタマイズ」から<head>~</head>内に自由に記述してくれる機能が付いているものもありました。