【WordPress】Webフォントを使用する
- 2019.10.02
- Visual Studio Code WEBデザイン

※「 Twenty Nineteen 」を使っていた時の記事です。
このサイトのWordPressのテーマはTwenty Nineteenです。
私はWidowsを使用していて、メイリオが適用されます。
メイリオも読みやすいんですが、Noto Sans JPが気に入っているので変えようとしました。
しかしテーマエディターを開いたはいいものの、PHPを全く知らないのでどこを変えればいいのか分かりません(- -)
少し考えて解決しましたので、備忘録として書きます。
広告
手順
今回はサーバーにファイルを置かず、Webから読み込む方法で進めます。
フォントは全体に適用させます。
- まずWebフォントを読み込むURLをテーマヘッダーに記述する。
- 次にfont-famiryを適用しているセレクタを探す。
- 最後にカスタマイズから追加CSSを記述する。
この手順で説明します。
Webフォントを読み込むURLをテーマヘッダーに記述する
使いたいフォントを読み込むURLを取ってきます。
今回のNoto Sans JPはGoogle Fontsで提供されいます。
これをコピーしてテーマヘッダーに貼り付けます。
WordPressのダッシュボードを開き、「外観」→「テーマエディター」を開きます。
テーマファイルの項目からテーマヘッダーを探し、クリックします。
移動した左のHTML内のHead要素の中に、リンクを貼り付けます。
「ファイルを更新」をクリックします。
これで読み込みは完了です。
font-famiryを適用しているセレクタを探す。
style.cssから探してもいいですが、簡単なのはブラウザの開発者ツールの「検証」です。
変えたい文字――例えば本文を右クリックして「検証」をクリックすると、その要素のプロパティが見れます。
そこからfont-famiryを適用しているセレクタを見つけてコピーします。
カスタマイズから追加CSSを記述する
「外観」→「カスタマイズ」→「追加CSS」を開きます。
「追加CSS」に先程コピーしたセレクタを貼り付けます。
あとはfont-famiryを指定するだけです。
お疲れさまでした!
余談
この方法だとWordPress本体が更新される度にGoogle FontsのURLが消えてしまいます。
子テーマにすると大丈夫らしいですが、私は全然分かりません(^^;)
プラグインも簡単なのがあるみたいで、そちらを利用するのもいいですね。
テーマによっては「外観」→「カスタマイズ」から<head>~</head>内に自由に記述してくれる機能が付いているものもありました。
広告
-
前の記事
【影廊】 深淵 マップ攻略 2019.10.01
-
次の記事
Visual Studio Code 選択した文字列をタグで囲む 2019.10.07