カテゴリ一覧から記事を探す

WordPressのフォントを変更する方法【プラグインなし】

WordPressのフォントを変更する方法【プラグインなし】

読みやすいサイトにするために、フォントを変更したい。
フォントも文字の色や大きさ変更して全体的なイメージを変えたい。

そんなことを思っている人におすすめできる記事です。

記事の前半ではフォントの変更方法、記事の後半では文字の色や大きさの変更方法について書いていきます。

1.WordPressでのフォントの変更方法

フォント自体を変える方法は簡単です。

WordPressのCSSのfont-family{..., ..., ...}の部分を変更するだけです。

左に書いているフォントほど優先して読み込まれるようになっています。

 使っているデバイスやブラウザによっては使用できないフォントがあれば、ひとつ右に設定したフォント、もうひとつ右のフォント・・・と変化していきます。

私の場合、最初にかわいげなフォントを検索して、設定してみたものの、全く変わらないということが起きました。

これは、WordPressにそのフォントが読み込まれていないためですね。

Webフォントの仕組み

これを解消するためには、フォントファイルをどこからかとってくる必要が出てくるわけです。

フォントを変更するならGoogleFontsを使うのが簡単

結局Google Fontsのサイトを使うのが一番簡単かなと思いました。

日本語フォントは普通読み込みが遅いものなのですが、このサイトのフォントならば読み込み速度も速いので、サイトが遅くなるということもないためおすすめです。

文字(テキストの部分)をクリックすることで自由に書き換え/フォントサイズの調節などもできます!

気に入ったフォントのタイトル(+ボタンも可)をクリックすると次のページに飛びます。

今回は、右上のM PLUS Rounded 1cを基準に説明していきます。

そのまま右上のSELECT THIS FONTをクリック!

すると↓のようなものが出てくると思います。

赤色の四角で囲ってある@IMPORTの部分をクリックして、

編集する箇所
外観
テーマエディター
style.css

style.cssの一番上に、オレンジ色で囲った部分をコピペします。
<style></style>の部分は必要ありません。

次に、取り入れたフォントを全体で使用するために青色で囲った部分を以下の部分にコピペします。

CSS
*{
  font-family: ○○,○○,○○,・・・;
  ・
  ・
  ・
}

となっている部分のfont-familyの所を青色で囲ったコードに書き換えれば全体に反映されます!

記事全体のフォントが書き変わるので、変更後はざっとみてイメージ通りか見てくださいね。思わぬ部分も変わっている可能性があります。

 テキスト記事の文章の部分しかフォントは変わらず、タイトルや見出しのフォントは(テーマにもよりますが)今のままなので、覚えておいてください。

文字の色や大きさも変えたい場合

せっかくなら、この機会にフォントだけでなく、フォントのサイズ・色も変えてみましょう。

文字の色は、黒よりも灰色の方が目にいいとされています。

そのため、色を変更するだけで見やすくもなります。

変え方は、同じくstyle.cssにて、pタグbodyタグの部分を以下のコードに書き換えるだけです。
style.css内でctrlFを押して文字検索をし、pタグbodyタグに関する設定の部分を探し、以下のように書き換えましょう。

CSS
body{
  font-size: 17px;
}

p{
  font-size: 1em;
  padding-bottom: 1.8rem;
  margin: 0px;
  letter-spacing: 0.05em;
  line-height: 1.8em;
  color: #3c3c3c;
}

bodyタグでサイト全体のフォントの大きさを17pxに指定(16~17pxが見やすい)し、pタグの文字の大きさも同じになるよう、1emにしています。
単位が違いますが、どちらも同じ文字サイズです。

これで、一気に見やすくなると思います。文字の大きさも大きくなり、行間や段落の間も大きくなって見やすくなります。

色を変更したい場合は、color: の部分を変えましょう。

色を選択する際には原色大辞典が一番見やすいと思います。
少し灰色にするのがポイントで、真っ黒(#000)よりも目に優しくなります。

3.まとめ

フォントを変えようと思ったときにうまくいかずに悩んでいる人もいたのではないでしょうか。

「読まれるサイト」は「見やすいサイト」だと思っていますので、これからもちょくちょく見やすくできるように工夫を凝らしていこうと思います。