WordPressのフォントを変更して魅力的なサイトを作る方法

こんにちは!エンジニアのノムラです。

突然ですが、

「サイトのデザインを変えてみたけど、なんかしっくりこない」
「今のデザインに違和感を感じる」

と困っていませんか?

そんな時はサイトのフォントを変えてみましょう。

この記事では、

  • 【基礎】Webフォントとは?
  • 【基礎】プラグインを使ってフォントを変更する
  • 【応用】プラグインを使わず自由にフォントを変更する
  • 【応用】タイプ別のオススメWebフォント

といった流れで、WordPressでフォントを変更する方法について解説していきたいと思います。

普段、Webサイトの色やデザインに目が行きがちですが、素敵なWebサイトは必ずといっていいほどサイトテーマにあったフォントに変更されています。

自分のサイトにピッタリのフォントを見つけて、より魅力的なサイトを作って行きましょう!

Webフォントとは?

私たちは普段、スマホやPCからWebサイトを閲覧しますが、デバイスの種類によって内蔵されているフォントは違います。

なので、PCからは綺麗に見えていても、スマホでは反映されていなかった、ということが起きてしまうのです。

そんな時に役に立つのがWebフォントです。
Webフォントはサーバーに置かれたフォントをインターネットを通してWebサイトに表示することができます。

Webフォント2

そのため、デバイスに内蔵されていないフォントでも、インターネットを通じて表示することができるのです。

他にも使いたいフォントを画像にしてWebサイトに表示するという方法もありますが、手間がかかったりSEO的にもあまり良くなかったりします。

そんな問題もWebフォントなら解決できますね。

プラグインを使ってフォントを変更

Webフォントについてわかったところで、実際にプラグインを使ってフォントを変更してみましょう。

今回使うプラグインは、Easy Google Fontsです。

プラグインEasy Google Fonts

 

このプラグインは、無料で使えるGoogleのWebフォントGoogle Fontsを使ってフォントを変えていくことができます。

管理画面で、フォントや色をリアルタイムで確認することができるので、CSSやHTMLがわからない人でも簡単にフォントの変更を行うことができます。インストールして有効化したら早速使ってみましょう。

外観>カスタマイズの画面に移動し、一番上のTypographyを開きます。

メニューバー

この中のDefault Typographyからフォントをカスタマイズしていくことができます。

デフォルトメニューバー

このプラグインで変更できるフォントは、カスタマイズメニューバーの上から順に

  • p
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6


になっています。

試しにh2のフォントを変えてみましょう。
上からh2、h3、h4の「Title」を表示した記事でみていきます。

 

タイトルフォント変更

フォントの種類はFont Familyから選択することができます。
右側のプレビュー画面で変更をリアルタイムで確認していくことができます。

Appearanceのタブを開くとフォントの色や背景色、行間なども変更していくことができます。

タイトル色変更

変更を適用して公開する場合は、左のメニューバーの右上にある公開ボタンを押すことで反映されます。

見出しは記事の中で目を惹く重要な部分なので、簡単にオリジナリティを出せると便利ですね。

プラグインを使わずに自由に変更

サイトのタイトルやヘッダーのフォントなど、自由にカスタマイズして行きたいという人は、自分でカスタマイズしていくこともできます。

ここでもGoogle Fontsのフォントを指定して行きたいと思います。

まずは、使いたいフォントとフォントを変更したい場所を探しましょう。使いたいフォントはGoogle Fontsのサイトで探します。
https://fonts.google.com/

ウェブフォント一覧

右のサイドバーから対応している言語や、カテゴリーを指定して検索することもできます。

今回はUltraというフォントを選択しました。
右上の+をクリックすると右下に追加されます。

フォント追加

追加されたらーをクリックしてフォントの詳細画面を開きましょう。EMBEDのタブで、必要なコードをコピペすることができ、CUSTOMIZEで詳細なスタイルを決めることができます。

次にフォントを適用する準備をします。EMBEDで上のコードをコピーします。

フォント詳細

WordPressの管理画面で、外観>テーマの編集の画面に行き、右のサイドバーのheader.phpを開きます。

このファイルのタ<head>グの中に先ほどコピーしたコードを貼り付けましょう。
コード貼り付け1

次にGoogle Fontsで追加したコードの下のコードをコピーします。

下コード

このコードを、フォントを変えたい要素に貼り付けます。

今回はサイトタイトルのフォントを変更します。

フォント変更前

外観>テーマの編集の画面の右のサイドバーのstyle.cssから、フォントを変えたい要素にコードを貼り付けます。

コード貼り付け2

ファイルを更新のボタンをクリックすると変更が適用されます。

サイトで確認してみるとフォントが変わっていますね。

フォント変更ご

フォントを変えたのに反映されない、どこのCSSを変更すればいいのかわからないという方は、以下の記事を参考にしてみてください。デザインを変更する場合の注意点など、WordPress初心者でもわかりやすく解説されています。

>>WordPressのCSSを編集してサイトデザインを自由に変更する方法

タイプ別オススメWebフォント

フォントの変え方はわかったけど、フォントを選ぶのって難しいですよね。そんな人のために、今回はタイプ別にオススメのフォントを紹介して行きたいと思います。

自分のサイトにぴったりのフォントを探してみてください。

可愛いフォント

丸みを帯びていたり、少し特徴的なフォントを紹介します。

Righteous

丸みを帯びて、重心が下にあるような可愛いフォントです。

スクリーンショット 2018-06-29 18.41.50

引用元:Google Fonts https://fonts.google.com/specimen/Righteous

Poiret One

細めで丸みのあるフォントです。細めのフォントは少し大人っぽい印象ですね。

スクリーンショット 2018-06-29 18.45.44

Baloo

ポップで可愛い印象のフォントです。

スクリーンショット 2018-06-29 18.47.45

丸みを帯びていたり、少し変わった可愛いフォントは、サイトのタイトルや見出しなど、目立たせたいところに使えそうですね。

シンプルなフォント

シンプルで使いやすそうなフォントを紹介します。

Open Sans Condensed

装飾のないシンプルなフォントです。

スクリーンショット 2018-06-29 18.50.04

https://fonts.google.com/specimen/Open+Sans%20Condensed

Noto Sans

Noto Sansは読みやすく綺麗なフォントで、カスタマイズのバリエーションも豊富になります。

スクリーンショット 2018-06-29 18.52.36

https://fonts.google.com/specimen/Noto+Sans

Noto Serif

先ほど紹介したNoto Sansがサンセリフ体だったのに対し、セリフ体のフォントです。
長めの文章でも読みやすそうですね。

スクリーンショット 2018-06-29 19.04.38

https://fonts.google.com/specimen/Noto+Serif

手書き風フォント

手書き風の雰囲気のあるフォントを紹介します。

Sacramento

柔らかな線画特徴的なフォントです。

スクリーンショット 2018-07-02 10.11.51

https://fonts.google.com/specimen/Sacramento

Amatic SC

大文字のみで縦長な字体が特徴的なフォントです。

スクリーンショット 2018-07-02 10.15.26

https://fonts.google.com/specimen/Amatic+SC

Cabin Sketch

鉛筆で塗りつぶしたような個性的なフォントです。

スクリーンショット 2018-07-02 10.15.41

https://fonts.google.com/specimen/Cabin%20Sketch

日本語対応フォント

ここまで紹介したGoogle Fontsは、日本語には対応していません。
日本語は、アルファベットや数字に加えて平仮名、漢字、カタカナなども読み込みが必要になるため、読み込みが遅くなってしまいます。

ただ、日本語に対応したGoogle Fonts + 日本語早期アクセスというものも用意されているので、試してみたい人は参考にしてください。
>>Google Fonts + 日本語

日本語は、通常のフォントを使用して、アルファベットはWebフォントを使うのがいいかもしれませんね。

番外編:WordPressは様々なカスタマイズが可能!

WordPressはフォント以外にもカスタマイズが可能です。元のテンプレートを使うことで、枠組みは残しつつ、変更したい部分だけ変えることで1から作るよりも早くサイト構築が出来ます。

HTML、CSS、PHP、Javascriptを学習することで、サイトのデザインやレイアウトの変更も自由にすることができます。

しかし、未経験から一気に4つも学ぶのは簡単なことではないですよね。

けど効率よく学びたい!いち早くフリーランスデビューしたい!

そんなあなたは、プログラミングスクールの受講を検討してみてはいかがでしょうか?
実際にwordpressの使用を希望する案件は多いですし、wordpressの改良のスキルを元にフリーランスとして活躍しているエンジニアもいらっしゃいます。

弊社「侍エンジニア塾」では、未経験からフリーランスデビューした事例もございます。無料体験レッスンではそんな非常識な結果を短期間で出す学習方法や、あなたのキャリアプランをヒアリングした上で最適な言語や学習プランを提案いたします。下記のカレンダーよりお気軽にお越しください。

まとめ

ここまで、

  • Webフォントとは?
  • プラグインを使った変更
  • プラグインを使わずに変更

といったフォントとフォントの変更方法から、タイプ別フォントの紹介まで解説をしました。

フォントを変更することで、よりこだわりのある魅力的なサイトを作ることができます。
しっかりマスターしていきたいですね!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ノムラ

ノムラ

WEBエンジニアをやっています。
プログラミング初心者にもわかりやすく解説ができるよう頑張ります。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習やキャリアのお悩み、お気軽にご相談ください。