WORDPRESS

【2022年】Webフォントとは?通常フォントとの違いって?メリット&デメリットを初心者向けに1から解説【WordPressブログ】

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

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

 

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

Webフォント

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

 

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

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

【2022年】Webフォントとは?通常フォントとの違いって?メリット&デメリットを初心者向けに1から解説【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フォントは使わないようにしてるよ!

人気記事

 

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

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

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

インフォトップ ワードプレステーマ売上

第1位

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

   ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

   ✔ 「稼ぐ」に特化した、本気で戦うための最適化&アフィリエイト機能!

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】

ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガーが本気レビュー
【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】

続きを見る

※2020年度Infotop売上及びInfotop Affidemy

About me

あずきアイコン main-01 背景透過

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS