最近、5Gや表示速度、Core Web Vitals等に対する世間での意識が高まっているせいか、「Webフォントってどう思います？」というご質問をよくいただきますので、私なりの意見をご紹介しておこうかと思います。

Webフォントとは

今さらご説明も不要かと思いますが、Webサイトに表示するテキストフォントの形式には2種類ありまして、1つ目はデフォルトで各OS、デバイス(デスクトップやモバイル)に組み込まれているフォントを表示するデバイスフォントです。そして2つ目が、予めネット上にアップしているフォントデザインをCSSで指定することで呼び出し、ダウンロードして表示するWebフォントです。

デバイスフォントの場合、イメージとしては“ハードディスク内蔵型”って感じですので表示に時間がかかるものではなく、スムーズなテキスト表示を実現しているわけですが、端末やOSに合わせたフォントデザイン種類が限られていますので、Webサイトとしての個性は出しにくいです。
一方、Webフォントの場合、イメージとしては“外付け吐き出し型”って感じですのでレスポンスのタイムラグが生じ、表示に時間がかかります。「最近はWebフォントの表示は遅くない」という方もいらっしゃいますが、デバイスフォントに比べれば遅くはなります。また、Webフォントに関してはサードパーティー制利用になりますので、使用料が発生したり使用範疇の制限が発生したりします。「○○PVまで○○円」とか「商用サイトには使用不可」とか、色々な注意点があります。しかしそれらを差し引いても余りある「個性」をとことん演出することができるのが魅力です。Webサイトの世界観や他サイトとの差別化を図りたい場合には非常に有効なのがWebフォントでしょう。

SEOにおいてWebフォントで気を付ける点は？

Webフォント使用によって、SEO上の注意をしなければならない点は表示速度とCore Web Vitalsですね。表示速度はスピードアップデートというアルゴリズムに対する影響度です。Webフォントによるレスポンスに時間がかかるため、表示速度も遅延します。
また、Core Web Vitalsに関しては特にCLS(Cumulative Layout Shift：レイアウト移動測定指標)にも注意したいところです。Webフォントは表示されるまでデフォルトでデバイスフォントが表示され、その後Webフォントに切り替わって表示される仕組みです。結果、デバイスフォントよりもWebフォントの方が文字間が広かったり、サイズに違いが出たりした場合、表示にズレが生じてくるでしょう。そしてそれがCLSに影響することもあるわけです。
私も以前、自身の運営するWebサイトでWebフォントを使用したことがありましたが、この瞬時のズレが気になってしまい、デバイスフォントに戻した経験があります。

表示速度もCore Web Vitalsもページ単位

さて、意外と忘れがちなので改めておさらいします。SEOにおいて、検索ランキングに影響する表示速度はスピードアップデート、そして2021年以降実装されるであろうCore Web Vitalsによる検索ランキングへの影響、この2つはどちらも“ページ単位で評価”するという点です。つまり、SEOにおいてランクインするページに対してのみ、まずは注意深く捉えると良いでしょう。
まぁ、ユーザー目線で考えればその限りではありませんが…。

ご提案として

以上を踏まえて、私から「Webフォントを使いたければこうすると良い」ことをご提案します。

Webフォントを使用してまで演出したい世界観の対象となるページを見出すと良い。
世界観を演出するのはニーズ軸よりもサービス軸のページの方が良い(記事要素のページよりもプロモーショナルなページを優先)。
SEO上、ランクインを対象としているページで極限での上位表示を競っている環境下ではWebフォントは見送ったほうが良い。
サイトを横断的に捉えず、CSSでルールを作った<div>単位でWebフォント化するかどうか考えると良い。
コンテンツ評価として影響が出ない限りで世界観を表したいフォントを画像化して(画像フォント化して)演出する。
HTTP/2をコンボで実装することで、より表示レスポンスを向上させる。

つまりSEOにおいて、検索クエリニーズを拾うようなページではWebフォントを使用せず、(Webフォントを使いたければ)そこからサービス利用に対してポジティブな姿勢を示したユーザーに対して、プロモーショナルページやエントリーフォームまでのブリッジページでWebフォントを使用すると良いのではないかという考えです。そのほうがサービスの世界観を演出しやすいですし、情報だけ伝達するユーザーニーズ軸はデバイスフォントを使用する感じで、サービスを啓蒙したいと考えている軸の中でもポイントとなる箇所でWebフォントを使用する感じで――と、使い分けたほうが良いでしょう。

今のところはこんな感じの回答ですね。5Gがスタンダード化された時、また新しい回答になるかもしれませんが、まずはこんな考えもある、ということをご参考ください。

WebフォントとSEO

Search for articles

Archives