専業ブロガー５年目のあずきです🐥
WordPressを始め、ブログやサイトでよく使われている…
Webフォント
について、ブログ初心者さん向けに１からわかりやすく解説していきます
具体的には、次の３点です
- 「Webフォント」とは？ 通常のフォントとの違い
- 「Webフォント」のメリット
- 「Webフォント」のデメリット
Contents
Webフォントとは？通常フォントとの違いって？メリット＆デメリットまで初心者向けにわかりやすく解説【WordPress】
ステップ１：WordPress「Webフォント」とは？ 通常のフォントとの違い
「Webフォント」とは、端的に言ってしまうと…
WEBサイト側が用意してくれているフォント
のこと
これだけ聞くと、ちょっと意味不明ですね
そもそも「Webフォント」について知るには、まずWebフォントではない「通常フォント」の仕組みから知っておくとスムーズです
「通常フォント」の場合、大まかに…
- 読者がWEBサイトにアクセス！
- サイト側が、「うちのサイトは ”MS明朝” という通常フォントで表示してね！」といった要求を、読者のPCやスマホに送信！
- 要求されたフォントを表示するためのデータが「読者のPCやスマホにインストールされているか？」を、PC・スマホ側が探し出す！
- そのフォントデータが無事PC・スマホ内から見つかれば、そのフォントで正常に表示される！
このような仕組みになっています
つまり！
読者側のPCやスマホに、サイト側から指定された「このフォントで表示してね！」というフォントデータがインストールされていないフォントだった場合、そのユーザーの画面上では…
本来のフォントでは表示されなくなる
ということ
ちなみに、「読者のPC・スマホにインストールされていないフォント」が使われているWEBページにアクセスした場合…
別のフォント
が自動的に反映される形になります
具体的な例だと…
同じページのはずだけど、WindowsとMacで「実際に表示されているフォント」がなぜか違う
というケースが実際にあったりします
これがまさに、訪れたWebサイト側が要求している「このフォントを使ってね！」というフォントデータが、例えば…
- Windowsだと、元々インストールされていたり
- Macだと、元々インストールされていなかったり
といったケースがあるからなんですね
一方で「Webフォント」の場合、上記のようなデメリットはありません
「Webフォント」の仕組みは、ざっと下記の通りです
- 読者がWEBサイトにアクセスする！
- サイト側が、「うちのサイトは ”Noto Sans” というWebフォントで表示してね！」といった要求を、読者のPCやスマホに送信する！
- さらに、「それ用のデータも一緒に送るよ！ これを使って表示してね！」と、フォントデータまで親切に送ってくれる！
- 読者のPC・スマホ側で ”Noto Sans” のフォントデータが読み込まれ、無事そのフォントで表示される！
この優れた仕組みが、そのまま次パートでご紹介する「Webフォントのメリット」へとつながります🐥
ステップ２：WordPress「Webフォント」のメリット【選択肢が増える／どのデバイスからでも、指定フォントを一律で表示】
Webフォントのメリットは、大きく「２つ」あります
まず１つ目のメリットは…
限られた「通常フォント」だけでは表現できない、「新旧さまざまなフォント」が使えるようになる
ということ
なかでも代表的なWebフォントの１つが、「Googleフォント」シリーズです
↑ Googleフォントの一種「Noto Sans」のサンプル
↑ 通常フォントの一種「メイリオ」のサンプル
限られた種類しかない通常フォントから「Webフォントまで選択肢を広げる」ことで、WordPressブログを始めとした ”Webサイトで表現できる幅” がさらに広がります
そして、「Webフォント」を使用する２つ目のメリットが…
読者がどのデバイスを使っていても、「サイト側が指定している本来のフォント」を一律で表示可能
ということ
なぜなら読者がどのデバイスを使っていようと、WEBサイト側から…
「このフォントデータを使って表示してね！」と、指定のフォントデータを送ってくれるから
ですね
そもそも「フォント」というのは…
- MS明朝
- MSゴシック
- 游明朝
- 游ゴシック
- メイリオ
などの、誰もが聞いたことのある有名な「通常フォント」はもちろんですが、それ以外にも「新しいフォント」がどんどん生まれています
でも読者のPCやスマホが、無数に存在するフォントのデータを ”全部インストールする” なんていうのは、正直あまり現実的じゃないですよね
一方で「Webフォント」の場合、そもそも読者のPC・スマホ側のインストールデータは使いません
なぜなら読者がアクセスするたびに、そのページで指定されているWebフォントのデータまで ”一緒に送ってくれる” ため
ただし！
そんな「Webフォント」にも、デメリットはあります
ステップ３：WordPress「Webフォント」のデメリット【サイト表示のスピードが遅くなる】
「Webフォント」の弱点は、ズバリ…
サイトの表示速度を重たく（遅く）してしまう可能性が高い
ということです
なぜ表示スピードに悪影響を及ぼしかねないかと言うと、まず「通常フォント」であれば…
- 読者がWebサイトにアクセスする！
- 「ページ情報」をサーバーから受信する！
- ページが表示される！
といった流れになるはずのところが、「Webフォント」の場合…
- 読者がWebサイトにアクセスする！
- 「ページ情報」をサーバーから受信する！
- さらに、そのページで指定されている「Webフォントのデータ」も受信する！
- ページが表示される！
という流れだからですね
つまり！
「そのページが指定しているWebフォントのデータ」まで読み込まなければいけない分、単純に表示スピードが遅くなってしまいます
しかも、「日本語」のWebフォントというのは基本的に…
とりわけ容量がかさばる（重たい）
んですね
例えば英語とかだと「アルファベット」だけなので、その読み込み量はさほど大きくないかもしれません
でもこれが日本語になると、英語と違い「漢字」という概念があるので、そのフォントデータはどうしても膨大になりがちです
なので結論！
WordPressブログを始めとした、各種Webサイトの運営側としては…
使いたいフォントがあるから、表示速度は多少遅くなっても「Webフォント」を使う！
Webフォントなら、「どのデバイスでアクセスされても」そのフォントで見てもらえる！
という「デザイン優先」のパターンか、もしくは…
表示速度を優先して、Webフォントは選択肢に入れずに「通常フォント」を使う！
デバイスによって、「実際の表示フォントが変わってしまう可能性がある」のは仕方ない！
という「表示スピード優先」のパターン、大きくこの ”２択” になるということですね
ちなみに…
WordPressで表示速度を優先して ”Webフォントを読み込ませない” ためには、「該当のWebフォントを削除」する必要があります
▼ 「Webフォントの削除方法」については、こちらの記事内で解説しています ▼
-
WordPressの高速化におすすめな方法６選を初心者向けにわかりやすく解説【サイトスピード向上】
続きを見る
おしまい🐥