ワードプレス

「Webフォント」とは?通常のフォントとの違いって?メリット&デメリットを初心者向けに優しく解説

Webフォントとは?通常フォントとの違いと、Webフォントのメリット&デメリット_アイキャッチ



あずきです🐥

最近のブログやサイトでは、もはや当たり前に使われるようになった…

Webフォント

という存在について、ブログ初心者さん向けに1から解説していきます

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

  • 「Webフォント」とは? 通常のフォントとの違い
  • 「Webフォント」のメリット
  • 「Webフォント」のデメリット

さっそく見ていきましょー🐥

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

今回の記事はこちらの章に属しています

WordPressブログガイド 第9章「豆知識」編 

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

「Webフォント」とは? 通常のフォントとの違い【フォントデータをサイト側が用意してくれる】

ブログガイド_見出し_01

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

  • WEBサイト側(サーバー)が用意してくれてるフォント

のこと

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

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

「通常フォント」の場合…

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

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

つまり!

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

そのユーザーの画面上では、本来のフォントでは表示されなくなるということ

それは、そもそも表示する術(つまりフォントデータ)が、ユーザーのPC・スマホ内には用意されてないからですね

ちなみに、「読者のPC・スマホにインストールされてないフォント」が使われてるWEBページにアクセスした場合、別のフォントが自動的に反映されることになります

具体的な例だと…

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

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

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

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

といったことがあるからなんですね

ここまでが、(Webフォントではない)通常フォント

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

「Webフォント」の仕組みは次の通り

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

この優れた仕組みが、そのまま次パートの「Webフォントのメリット」につながります🐥

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

ブログガイド_見出し_02

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

1つ目のメリットは…

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

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

Webフォントとは?通常フォントとの違いと、Webフォントのメリット&デメリット_2-01

↑ Googleフォントの1種「Noto Sans」の例

Webフォントとは?通常フォントとの違いと、Webフォントのメリット&デメリット_2-02

↑ 通常フォントの1種「メイリオ」の例

今まで「通常フォント」のなかだけで選んでたのが、「Webフォント」まで選択肢を広げることで、使えるバリエーションがさらに広がります

そして2つ目のメリット!

これがけっこう重要

ズバリ…

  • 読者がどのデバイスを使っていても、「サイト側が指定してる本来のフォント」を一律で表示させられること

ちなみにここで言う「デバイス」とは、例えば「WindowsだろうとMacだろうと」みたいなことですね

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

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

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

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

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

ただ、読者のPCやスマホが「無数に存在するフォント」のデータを全部インストールするのは、あまり現実的じゃないですよね

更新作業だらけになるし、ストックできるフォントデータの容量も限界がある…

そこで、「Webフォント」の出番です

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

アクセスするたびに、「そのページで指定されてるWebフォント」のデータを一緒に送ってくれるからですね

ただ!

そんな「Webフォント」にも、デメリットはあります(次パートへ!)

「Webフォント」のデメリット【ページ表示のスピードが遅くなる】

ブログガイド_見出し_03

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

  • ページの表示速度を遅くしてしまう可能性が高い

ということです

これがわりと問題

なぜ表示スピードに影響してしまうかと言うと、「通常フォント」であれば…

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

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

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

という流れだからですね

つまり、「そのページ指定のWebフォントデータ」というのをわざわざ読み込まなければいけない分、単純に表示速度が遅くなってしまいます

しかも!

日本語のWebフォントというのは、とりわけ容量が重い

んですね

冷静に考えると当たり前で、例えば英語とかだと「アルファベット」だけなので、読み込みの量はたかが知れてます

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

この「読み込みの遅さ」というのが、Webフォントのデメリットです

なので結論、サイト運営側としては…

  • 使いたいWebフォントがあるから、表示速度は多少遅くなってもWebフォントを使う!
  • しかもWebフォントなら、どのデバイスでアクセスされてもそのフォントで見てもらえる!

というパターンか、もしくは…

  • ページ表示速度を優先して、Webフォントは選択肢に入れずに、通常フォントを使う!
  • デバイスによって、もしかしたら実際の表示フォントが多少変わってしまう可能性があるのは、仕方ない!

というパターンの2択になると思います

ちなみに「WordPress」でこのWebフォントを読み込ませないためには、「該当のWebフォントを削除」する必要があります

詳細はこちら♪

WordPress_Googleフォントの削除方法_アイキャッチ
【Autoptimizeなら一瞬】WordPressで「Googleフォントの削除」を行う方法【表示スピードの改善】

続きを見る

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_アイキャッチ
WordPressで、Webフォント「Googleフォント」の削除は実際するべきか?【サイト表示の高速化】

続きを見る

参考までにこのブログはと言うと、後者の「表示速度を優先して、Webフォントは使わない」というスタイルを採ってます

おしまい♪

あずき🐥

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

今回の記事はこちらの章に属しています

WordPressブログガイド 第9章「豆知識」編 

あずきのWordPressブログガイド 総合TOP 

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。