WORDPRESS

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

「Webフォント」とは?通常のフォントとの違いって?メリット&デメリット アイキャッチ



あずきです🐥

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

Webフォント

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

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

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

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

\ 本気で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

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

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

「WING AFFINGER5」の気に入ってる点・気になる点をガチレビュー アイキャッチ
【愛用】「WING AFFINGER5」って実際どうなの?気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ/専業ブロガー4年目】

続きを見る

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

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

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

About me

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

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

あずき

 

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

 

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

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

WordPressブログ「完全初心者」ガイド 見出し a-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フォント」のメリット【選択肢が増える/どのデバイスからでも、指定フォントを一律で表示】

WordPressブログ「完全初心者」ガイド 見出し a-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フォント」のデメリット【ページ表示のスピードが遅くなる】

WordPressブログ「完全初心者」ガイド 見出し a-03

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

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

ということです

これがわりと問題

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

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

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

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

という流れだからですね

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

しかも!

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

んですね

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

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

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

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

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

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

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

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

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

 

「Webフォントの削除」については、こちらの記事で詳しく解説しています ↓

wp-speed-up-recommend-list アイキャッチ
【2021年】WordPress高速化におすすめな、専業ブロガー4年目が実践している「7つ」の方法【ブログを最適化して表示速度アップ】

続きを見る

 

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

おしまい♪

あずき🐥

\ このブログでも愛用中! /

WING AFFINGER5 banner-large-01

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

 ✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション!

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

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

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

関連:「WING AFFINGER5」気に入ってる点・気になる点をガチレビュー

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

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

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

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

About me

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

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

あずき

 

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

 

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

-WORDPRESS

© 2019 あずきのぶろぐ