広告 WORDPRESS

Webフォントとは?通常フォントとの違いって?メリット&デメリットまで初心者向けにわかりやすく解説【WordPress】

Webフォントとは?通常フォントとの違いって?メリット&デメリットまで初心者向けにわかりやすく解説【WordPress】
 

専業ブロガー5年目のあずきです🐥

 

WordPressを始め、ブログやサイトでよく使われている…

Webフォント

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 

具体的には、次の3点です

  1. 「Webフォント」とは? 通常のフォントとの違い
  2. 「Webフォント」のメリット
  3. 「Webフォント」のデメリット
さっそく見ていこー!

Webフォントとは?通常フォントとの違いって?メリット&デメリットまで初心者向けにわかりやすく解説【WordPress】

ステップ1:WordPress「Webフォント」とは? 通常のフォントとの違い

WordPress ヘッダー c-01

「Webフォント」とは、端的に言ってしまうと…

WEBサイト側が用意してくれているフォント

のこと

 

これだけ聞くと、ちょっと意味不明ですね

 

そもそも「Webフォント」について知るには、まずWebフォントではない「通常フォント」の仕組みから知っておくとスムーズです

 

「通常フォント」の場合、大まかに…

  1. 読者がWEBサイトにアクセス!
  2. サイト側が、「うちのサイトは ”MS明朝” という通常フォントで表示してね!」といった要求を、読者のPCやスマホに送信!
  3. 要求されたフォントを表示するためのデータが「読者のPCやスマホにインストールされているか?」を、PC・スマホ側が探し出す!
  4. そのフォントデータが無事PC・スマホ内から見つかれば、そのフォントで正常に表示される!

このような仕組みになっています

 

つまり!

 

読者側のPCやスマホに、サイト側から指定された「このフォントで表示してね!」というフォントデータがインストールされていないフォントだった場合、そのユーザーの画面上では…

 

本来のフォントでは表示されなくなる

 

ということ

それは、指定のフォントを表示するための元データが(PCやスマホ内に)入ってないから!
 

ちなみに、「読者のPC・スマホにインストールされていないフォント」が使われているWEBページにアクセスした場合…

別のフォント

が自動的に反映される形になります

 

具体的な例だと…

同じページのはずだけど、WindowsとMacで「実際に表示されているフォント」がなぜか違う

というケースが実際にあったりします

 

これがまさに、訪れたWebサイト側が要求している「このフォントを使ってね!」というフォントデータが、例えば…

  • Windowsだと、元々インストールされていたり
  • Macだと、元々インストールされていなかったり

といったケースがあるからなんですね

ここまでが、(Webフォントじゃない)通常フォントの要点だよ!
 

一方で「Webフォント」の場合、上記のようなデメリットはありません

 

「Webフォント」の仕組みは、ざっと下記の通りです

  1. 読者がWEBサイトにアクセスする!
  2. サイト側が、「うちのサイトは ”Noto Sans” というWebフォントで表示してね!」といった要求を、読者のPCやスマホに送信する!
  3. さらに、「それ用のデータも一緒に送るよ! これを使って表示してね!」と、フォントデータまで親切に送ってくれる!
  4. 読者のPC・スマホ側で ”Noto Sans” のフォントデータが読み込まれ、無事そのフォントで表示される!

この優れた仕組みが、そのまま次パートでご紹介する「Webフォントのメリット」へとつながります🐥

 

ステップ2:WordPress「Webフォント」のメリット【選択肢が増える/どのデバイスからでも、指定フォントを一律で表示】

WordPress ヘッダー c-02

Webフォントのメリットは、大きく「2つ」あります

 

まず1つ目のメリットは…

限られた「通常フォント」だけでは表現できない、「新旧さまざまなフォント」が使えるようになる

ということ

 

なかでも代表的なWebフォントの1つが、「Googleフォント」シリーズです

 

「Webフォント」とは?通常のフォントとの違いって?メリット&デメリット 2-01

↑ Googleフォントの一種「Noto Sans」のサンプル

 

「Webフォント」とは?通常のフォントとの違いって?メリット&デメリット 2-02

↑ 通常フォントの一種「メイリオ」のサンプル

 

限られた種類しかない通常フォントから「Webフォントまで選択肢を広げる」ことで、WordPressブログを始めとした ”Webサイトで表現できる幅” がさらに広がります

 

そして、「Webフォント」を使用する2つ目のメリットが…

読者がどのデバイスを使っていても、「サイト側が指定している本来のフォント」を一律で表示可能

ということ

ここで言う「デバイス」っていうのは、例えば「WindowsだろうとMacだろうと…」みたいな意味合いだよ!
 

なぜなら読者がどのデバイスを使っていようと、WEBサイト側から…

 

「このフォントデータを使って表示してね!」と、指定のフォントデータを送ってくれるから

 

ですね

 

そもそも「フォント」というのは…

  • MS明朝
  • MSゴシック
  • 游明朝
  • 游ゴシック
  • メイリオ

などの、誰もが聞いたことのある有名な「通常フォント」はもちろんですが、それ以外にも「新しいフォント」がどんどん生まれています

 

でも読者のPCやスマホが、無数に存在するフォントのデータを ”全部インストールする” なんていうのは、正直あまり現実的じゃないですよね

更新作業だらけになるし、「ストックできる容量」も限界がある…
 

一方で「Webフォント」の場合、そもそも読者のPC・スマホ側のインストールデータは使いません

 

なぜなら読者がアクセスするたびに、そのページで指定されているWebフォントのデータまで ”一緒に送ってくれる” ため

 

ただし!

 

そんな「Webフォント」にも、デメリットはあります

ということで、最後のステップ3へ!
 
 

ステップ3:WordPress「Webフォント」のデメリット【サイト表示のスピードが遅くなる】

WordPress ヘッダー c-03

「Webフォント」の弱点は、ズバリ…

サイトの表示速度を重たく(遅く)してしまう可能性が高い

ということです

これがわりと問題
 

なぜ表示スピードに悪影響を及ぼしかねないかと言うと、まず「通常フォント」であれば…

  1. 読者がWebサイトにアクセスする!
  2. 「ページ情報」をサーバーから受信する!
  3. ページが表示される!

といった流れになるはずのところが、「Webフォント」の場合…

  1. 読者がWebサイトにアクセスする!
  2. 「ページ情報」をサーバーから受信する!
  3. さらに、そのページで指定されている「Webフォントのデータ」も受信する!
  4. ページが表示される!

という流れだからですね

 

つまり!

 

「そのページが指定しているWebフォントのデータ」まで読み込まなければいけない分、単純に表示スピードが遅くなってしまいます

イメージとしては、「重たい本」を1冊ついでに渡されるようなものだね
 

しかも、「日本語」のWebフォントというのは基本的に…

 

とりわけ容量がかさばる(重たい)

 

んですね

 

例えば英語とかだと「アルファベット」だけなので、その読み込み量はさほど大きくないかもしれません

 

でもこれが日本語になると、英語と違い「漢字」という概念があるので、そのフォントデータはどうしても膨大になりがちです

この「読みこみが重たくなる」っていうのが、Webフォントの弱点!
 

なので結論!

 

WordPressブログを始めとした、各種Webサイトの運営側としては…

使いたいフォントがあるから、表示速度は多少遅くなっても「Webフォント」を使う!

Webフォントなら、「どのデバイスでアクセスされても」そのフォントで見てもらえる!

という「デザイン優先」のパターンか、もしくは…

表示速度を優先して、Webフォントは選択肢に入れずに「通常フォント」を使う!

デバイスによって、「実際の表示フォントが変わってしまう可能性がある」のは仕方ない!

という「表示スピード優先」のパターン、大きくこの ”2択” になるということですね

 

ちなみに…

 

WordPressで表示速度を優先して ”Webフォントを読み込ませない” ためには、「該当のWebフォントを削除」する必要があります

参考までにこのブログでは、「WordPress高速化」を重視してWebフォントは使わないようにしてるよ!

▼ 「Webフォントの削除方法」については、こちらの記事内で解説しています ▼

WordPressの高速化におすすめな方法6選を初心者向けにわかりやすく解説【サイトスピード向上】
WordPressの高速化におすすめな方法6選を初心者向けにわかりやすく解説【サイトスピード向上】

続きを見る

おしまい🐥

 

人気記事

 

各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます

ワードプレスブログ「完全初心者」ガイド!

全8章の「総合TOP」ページです

ワードプレスブログ「完全初心者」ガイド

 
プロフィールカード bg-01
プロフィールカードアイコン main-02

あかね猫

専業ブロガー7年目 / 元アパレル(歴10年)/ 2024年からYouTubeも本格的に始めました!(旅行系チャンネル)

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS