Webフォント

大前提

従来、フォントは対象の端末にダウンロードされていないと利用できなかった。

Webフォントの登場

その問題に対応するために、Webページと一緒にフォントもダウンロードさせようとなった。

これにより、対象端末がフォントをインストールしてなくても、そのフォントを表示させることができるように。

日本語Webフォントは厄介

英語は文字数が少ないので、フォントデータも小さくなる。

なのでWebページと一緒にダウンロードしてもそこまで問題にはならない。

だが、日本語の場合はこれが問題になってくる。

日本語データはめっちゃ多い。ひらがな、カタカナ、漢字。特に漢字。

これにより、対象フォントを表示できるまで時間かかるっていうことになる。

それじゃ使えないよねってのが問題だった。

解決策

要するにダウンロードするフォントの数を減らすってだけ。

よく使う文字のフォントだけ、最初にダウンロードする。

中には、動的にサブネット作ってダウンロードさせる仕組みもあるらしい。

特別な需要がない限りはWebフォントを使わなくてもいいかも？と思ったりする。

Input

hr.icon

その前提をひっくり返す方法がWebフォントってやつ。

Webフォントを利用すれば、閲覧者側の端末環境に依存せずにホームページ作成者が指定したフォントを確実にホームページ上に表示できます。

それがWebフォントだと、環境依存せずにフォント表示できるって。

Webフォントだとホームページデータと同時に、指定されているフォントデータも同時にダウンロードするので、どの端末でも指定されたフォントで文章が表示されます。

Webフォントの登場以前でも、作成者がホームページ上の文章のフォントを指定することは可能でした。

ですが、そこにはひとつ問題がありました。

ホームページを閲覧する側のパソコンやスマートフォンなどの端末にそのフォントデータが入っていなければ、指定されたものとは別のフォントで文章が表示されてしまっていたのです。

https://scrapbox.io/files/645ba713c848351147dc2be4.png

「文字の画像化にはデメリットが多く、Webフォントにメリットがたくさんあるなら、日本語Webフォントはなぜこれまであまり使われてこなかったのか？」との疑問です。

これはまさに的を射た疑問です。Webフォントでのサイト構築が一般的になりつつある欧米と比較して、日本でのWebフォントの普及はかなり遅れています。

日本語Webフォントには、メリットと同時にデメリットや導入の障壁が存在し、日本での普及を妨げてきました。

ですが、近年技術の進歩によって最大のデメリットは解決されて、日本にもWebフォント導入の機運が高まってきました。

最近はいい感じなのね

たとえば、英語ならアルファベットの種類は26個しかないためフォントデータはかなり少なくなります。ですが、日本語はそうはいきません。ひらがな、カタカナ、漢字・・・と文字の種類が多岐にわたるため、用意しなければならないフォントデータも膨大です。

そのため、フォントデータの容量がかなり大きなものになっていました。Webフォントはホームページのデータと同時にフォントデータもダウンロードしてもらう必要があるので、ページの読み込み速度が重くなってしまう懸念があったのです。

英語とかアルファベットだけやもんな。日本語全部ダウンロードしようと思ったら、ダウンロード量がとんでもないことになるな。確かに。

このように容量の問題で普及が進まなかった日本語Webフォントですが、近年になって状況が変わりはじめました。

技術の向上によって、日本語Webフォントの容量の問題が軽減されたのです。具体的には「サブセット化」という技術です。これは、Webフォントのダウンロード時に日本語のあらゆる文字（膨大な数の漢字など）データを一気にダウンロードするのではなく、ホームページで一般的に利用される一部の文字データのみダウンロードする手法です。

綺麗な日本語Webフォントは有料の場合が多く、ランニングコストが発生します。

サービスの種類にもよりますが、月額1,000円～2,000円程度のところが多いようです。ホームページは長期間使用するものですから、積み上げていくと結構大きい費用がかかることになります。

まあ、最悪フリーのでいいやろ知らんけど。

有名サイトがどういう日本語フォント使ってるのか調べたらOKだ。

GoogleフォントやAdobeフォントをはじめ、主要サービスのほとんどが無料で使えますが、有料の場合もあります。

買い切りのタイプもありますが、なかには従量課金（PV数依存）のサービスもあり、見られれば見られるほど費用がかかる仕組みになっています。

ブラウザやOSによって、テキストの表示位置が異なる場合がある

フォントによっては、文字のベースラインがずれてしまうことがあります。このためにすべての閲覧環境で検証作業をするのはなかなか大変ですよね。

この現象を軽減する機能を用意しているWebフォントサービスもあるので、あわせてチェックしてみてください。

フォントのファイルサイズを軽量化する

Webフォントを使用した際の表示速度が遅い問題はユーザーにストレスを与えたり、場合によっては離脱の原因にもなりかねません。そんなときのアプローチとして、以下の二つがあります。

サブセット化

ダイナミック・サブセッテング

サブセット化することで、フォントファイルのダウンロード問題を軽減するのね。

フォントデータが重く、表示速度が遅い

Webフォントが登場したばかりの頃に比べれば、いまはページの表示速度が非常に早くなってきています。

表示速度が遅かった理由としては、特に日本語はひらがなやカタカナ、漢字などを合わせると文字の数が膨大で、フォントデータが重いためです。漢字は使用頻度の高い第一水準漢字に絞っても、3,000文字近くあります。そのため、以下のような現象が発生することがあります。

FOUT/FOIT問題