WordPress のテーマにゆるいWebフォント Kosugi Maru (Google Font) を使ってみた

Wordpress

2020.02.222020.02.23

WordPressにWebフォント設定してみました。今回はGoogle Fontsの Kosugi Maru を使いました。
当サイトのテーマは、Cocoon Child ですが、その他のテーマでも基本は同じかと思います。
追加のプラグインなどは必要ありません。

設定方法

ダッシュボードの外観→カスタマイズ→追加CSS を開きます。
左側に入力エリアがあるので、そこにフォントの設定を追記します。
入力するとすぐにプレビューが表示されるので、変更点がわかりやすいです。

設定例

今回は、以下のように設定しています。
ポイントは「@importでフォントをとってくる」ところと「font-family: でスタイルに適用する」ところだけなので設定も簡単です。

/* Webフォントをインポートする */
@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru|Lobster&display=swap'); 

/* サイト全体のフォントを指定 */
body {font-family: 'Kosugi Maru', sans-serif; }

/* タイトルなどに個別のフォントを指定 */
.site-name-text{font-family: 'Lobster', serif; font-size: 72px;}
.entry-title{font-family: 'Kosugi Maru', serif; font-size: 32px;}

Webフォントの探し方

Google Fonts に使えるフォントがたくさんあるのでそこから探します。日本語が使えるフォントを探す場合はLanguageのところで、Japaneseを選択すれば絞り込めます。良さそうな物を選んで、➕ボタンを押します。
そうするとダイアログが出てくるので　@IMPORT と書かれたところをクリックすると、css への記載例が表示されるので、それをコピーして使います。複数のフォントを選択する場合は何個か連続して➕ボタンを選択すると複数のフォントを使う場合の記載例が出てきます。