少し前にWebサイトを更新し、その際にWebフォントをオンライン利用からダウンロード利用に切り替えました。GDPRの影響もあってプライバシー面を考慮した結果です。

せっかくなので、Webフォントの利用パターンとメリット・デメリットについて整理しておきます。

▍Webフォントとは

Webフォントとは、Webページ上で文字を表示するために使われるフォントです。Webサイトの利用者（訪問者）のコンピューターに該当のフォントがなくても、そのフォントを表示できます。

Webフォントを使う場合、フォント提供サービス（例：Google Fonts、TypeSquareなど）をオンライン利用する方法と、フォントをダウンロードして利用する方法があります。

▍パターン①オンライン利用

Webサイトに外部のフォントへのリンクを埋め込む方法で、Webサイト上にはフォントはありません。利用者がWebサイトにアクセスすると、指定されたリンク先のフォント提供サービスから利用者がフォントをダウンロードします。

「埋め込み」や「CDN（Content Delivery Network）」と呼ばれることもあります。

［メリット］
Webサイト提供側がフォントファイルを管理せずに済む点が特長です。その結果、以下のような恩恵を受けられます。

• 常に最新のフォントを提供できる

• Webサイトのストレージ容量を節約できる

［デメリット］
利用者がフォント提供サービスにアクセスすることになる点が留意点です。その結果、以下のようなリスクが発生します。

• フォントの読み込み可否や速度がフォント提供サービスに依存する

• フォント提供サービスにもIPアドレスなどの利用者情報が送信される

▍パターン②ダウンロード利用

あらかじめフォントをWebサイトにダウンロードしておく方法です。利用者がWebサイトにアクセスすると、Webサイトがフォントを提供します。

［メリット］
フォントがWebサイトに存在している点が特長です。その結果、以下のような恩恵を受けられます。

• 外部のフォント提供サービスの影響を受けない

• 利用者の情報が外部のフォント提供サービスに送信されない

［デメリット］
Webサイト提供側がフォントを管理することになる点が留意点です。その結果、以下のような手間や考慮点が発生します。

• フォントのバージョンが新しくなった場合、更新する必要がある

• ストレージ容量を消費する

▍最近はダウンロード利用が無難？

これまでは、次のようなパターンが多かった印象です。

• 大規模Webサイトなど、安定したネットワーク環境にあるWebサイトではダウンロード利用を採用

• 比較的小規模なWebサイトではオンライン利用を採用

ですが、2022年にいわゆるGoogle Fonts事件が発生したため、状況は変わりつつあります。

Google Fonts事件とは、フォントをオンライン利用しているWebサイトの提供事業者に対する損害賠償請求です。利用者の同意を得ないままIPアドレスがGoogleに提供されることが、EU一般データ保護規則（General Data Protection Regulation: GDPR）に反するというものです。詳細は以下の記事をご参照ください。

このようなリスクを避けるために、グローバル展開していないサイトであっても、ダウンロード利用を選んだ方が無難であるという風潮が出ています。欧州と米国の争いの巻き添えを食っている気もするところは少しモヤモヤしますが。。

ただ、表示言語が日本語のみで日本に住む人のみを対象にしたWebサイトに対して損害賠償が発生するリスクは低いかもしれません。いずれにしても、メリットとデメリットを加味した上で、どちらのパターンを採用するかを選択いただければと思います。

ちなみにうちは日本人を対象にした小規模なサイトですが、万が一のリスクを避けるためにダウンロード利用を採用しました。

▍ダウンロード利用するには

Webサイトを自作している環境では、ダウンロードしたフォントをCSSの@font-face で指定します。詳細は以下の記事をご参照ください。

WordPressの場合はテーマによっては対応しています。他のWebサイト作成ツールでも対応しているかもしれないので、お使いの環境に合わせて調べてみてください。

▍おわりに

Webフォントの2つの利用パターン（オンライン利用とダウンロード利用）について、特徴とメリット・デメリットについて解説しました。

パターンの採用にあたっては、Webサイトの規模や対象者を踏まえ、管理面・安定性に加えてプライバシーも考慮いただければと思います。

私たちのデジタル技術活用のメモが次のマガジンにあります。よろしければ覗いてみてください！