Webフォントを使用する時に知っておきたいこと

WebデザインにWebフォントを使用する際に知っておきたい前提や技術的な課題などについてです。Webフォントにあまり詳しくない人向けです。

Webフォントの仕組み

Webフォントはデバイスにインストールされていないフォントでも表示できるようにする技術です。基本的な仕組みは、サーバーに設置されたフォントファイルをダウンロードし、それをブラウザ上で利用することでフォントを表示しています。

この仕組みをふまえて、Webフォントの特徴を解説していきます。

日本語Webフォントはファイルサイズが大きい

欧文に比べ日本語は文字数（グリフ）が多いです。JIS第1水準漢字と呼ばれる、日常的によく使う漢字だけでも約3000字、そのほか、かなや数字、記号などを含めて約3500字くらいが一般的なWebサイトの表示に必要な字数になります。

欧文フォントが数百キロバイト単位に対し、数メガバイト単位になります。これは1ウェイト毎のファイルサイズです。そのため、サイト内で「レギュラー」「ミディアム」「ボールド」の3ウェイトを使った場合、数メガバイト×3となり、ダウンロードサイズが肥大化します。

実際には大手Webフォントサービスでは、フォントファイルの配信に最適化が行われて、上記のような大きなファイルが丸っとダウンロードされるわけではありませんが、欧文に比べて重たいのは事実です。

レイアウトシフトor透明な表示が発生する

先述のとおり、Webフォントはダウンロードの必要があり、画像の読み込みと同じように表示までにラグが生じます。

そのラグに対して2通りの手法があり、それぞれにメリット・デメリットがあります。どちらが優れているなどではなく、何を優先させるかの問題です。

ダウンロードが終わるまで代替フォントで表示する（FOUT: Flash of Unstyled Text）

ダウンロードが完了するまでデバイスに搭載されている代替フォントを表示し、完了したらWebフォントに切り替える手法です。テキストがすぐに表示されるのでユーザーはコンテンツを読めるメリットがあります。

しかし代替フォントとWebフォントの字体自身の大きさが必ずしも一致しません。それによりWebフォント読み込み後にレイアウトシフト（ガクッとレイアウトが移動する現象）が起きます。これはユーザーの誤クリックなどの原因になり、コアウェブバイタル的にもマイナスです。

ちなみにGoogle Fontsではデフォルトでこの設定です。

ダウンロードが終わるまでフォントを表示しない（FOIT: Flash of Invisible Text）

こちらは代替フォントで表示せず読み込み終わるまで透明な状態で待機します。前述のレイアウトシフトは起きませんが、テキストの表示に時間がかかるのでユーザーはダウンロードが終わるまでサイトの内容を読み取ることはできません。

この場合コアウェブバイタルでいうところのLCP（Largest Contentful Paint）に悪影響があります。

いずれにせよWebフォント表示までのラグによるUXへの悪影響が懸念されます。しかし、FOUTに関しては次世代のCSSで改善されるかもしれません(*1)。

無料で使える日本語Webフォントは限られている

日本語のWebフォントで無料で使えるフォントは少ないです。かなり大雑把に言ってしまうと、Google Fontsが提供しているフォント以外は有料だと思っても構いません。（最近はIBMのオープンソースフォント、IBM Plex Sans JPもあります）

有名所のフォント（リュウミンや見出しゴ）をWebフォントとして利用したい場合はそのWebフォントを配信しているサービスに登録しなくてはなりません。例えば、TypeSquareやFONTPLUS、Adobe Fontsなどがそれにあたります。

それぞれのサービスで設定された料金を支払う必要があります。PV数による課金システムなどもあるので、利用する場合には想定PV数と予算の相談が必要でしょう。

フォントのライセンスには注意

上記の無料・有料フォントとも関連しますが、のライセンスは大きく分けて2つあります。オープンソース系のライセンスとそうでないライセンスです。Google Fontsで配信されているのはこのオープンソースライセンスのものです。

オープンソースライセンスは自由度の高いライセンスで、利用に関しては制限はなく再配布なども可能です。どんなサイトでも使えます。

一方で非オープンソースのライセンスは利用に関して制限があったり、使えないサイトや用途などがあります。有料フォントの多くがこちらのライセンスになります。

ちょっと注意したいのがフリーフォントと呼ばれるものが必ずしもWebフォントとして利用できるとは限らない点です。ライセンスされるのが印刷物や画像制作などへの利用であり、Webフォントの利用のライセンスを許可していない場合もあります。

フォント配信サービスを利用する場合はその利用規約に従えば問題ありません。そうでない場合は自分でフォントファイルを配信することになります（セルフホスティング）。再配布との兼ね合いもありますのでセルフホスティングの際はライセンスに注意してください。

フォント配信サービスの契約はクライアント自身で行う必要な場合がある

フォント配信サービスの利用規約にもよりますが、制作会社がWebフォントを契約して、クライアントに納品する、ということができないものがあります。その場合、クライアント自身が契約してもらう必要があります。Adobe Fontsがこのタイプです(*2)。

TypeSquareは制作会社が契約してクライアントに納品することができますが、その場合も「Webフォント代」としてクライアントに請求することはできないそうです(*3)。（サイト保守費用などに含めるのOKみたいです）

万一、制作会社が廃業して使えなくなる場合などもありますので、クライアント自身が契約した方がトラブルが少ないかもしれません。

サービス側の事情でWebフォントが使えなくなる可能性がある

フォント配信サービスを利用している場合、サービス自体が廃止、あるいは利用しているフォントの配信が終了などの可能性があります。最近ではAdobe Fontsの一部フォントの終了が記憶に新しいでしょう。（Adobe Fontsの場合、既に登録済みのフォントは平気なようですが）

こうなってしまうと、制作・クライアントサイドではどうしようもありません。オープンソースライセンスであればセルフホスティングに切り替えられますが、有料フォントの多くはセルフホスティングが認められていません。別のサービスに移行するか諦めるしかないです。

フォントを作っている会社のサービスを利用する方が少しだけリスクを減らせるかもしれません。

まとめ

どのデバイスでもフォントを統一できるWebフォントは魅力的ですが、デバイスフォントを表示する場合と違って様々な制約や技術的障壁があります。

これらWebフォントの特徴を頭の片隅においておくと、クライアント・実装者とのコミュニケーションの場面で円滑になることもあるでしょう。

参照

*1 フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD

*2 フォントのライセンス | Adobe Fonts

*3 制作会社で利用を考えています。TypeSquareを利用したWebサイトを、クライアントから依頼を受けて制作し、納品してもよいですか？  | TypeSquare