Webフォントはどう動くのか — フォントが崩れる理由とライセンス
デザイナーが丁寧に選んだすてきなフォントが、いざ別の人の画面では味気ない既定のフォントで表示される、ということがあります。たしかに同じサイトなのに、文字の形が違って出るのです。なぜこんなことが起きて、どうすれば誰の画面でも同じフォントで見えるようにできるのでしょうか。
今回の記事では、Web で文字がどうやって画面に表示されるのか、なぜときどき崩れるのか、そしてフォントにもなぜライセンスが付いてくるのかを、コードなしで解きほぐしていきます。
フォントは、コンピュータごとに違って入っています #
フォントは、サイトではなく見る人のコンピュータに入っている場合が多くありました。昔の Web は「このフォントで見せて」と指定するだけで、実際のフォントは見る人の端末にあるものを使っていました。
問題は、人によって入っているフォントが違うという点です。自分のコンピュータにはあるフォントが相手のコンピュータにないと、ブラウザは仕方なく、似た別のフォントで代わりに表示します。デザイナーが意図した形が人によって変わり、ときに文字が崩れて見えるのは、このためです。
Webフォントは、フォントを一緒に届けてくれます #
この問題を解くために出てきたのが Webフォントです。サイトがフォントのファイルまで一緒に送り、見る人のコンピュータにそのフォントがなくても同じように見えるようにする方式です。いまではほとんどすべてのサイトがこの Webフォントを使います。
たとえるなら、昔は「明朝体で読んで」とお願いするだけで、相手が明朝体を持っていなければそれまでだったのに対し、Webフォントはフォントそのものを手紙に同封して送るようなものです。だから誰の画面でも、デザイナーが選んだとおりに見えます。
Webフォントも、結局はダウンロードです #
フォントを一緒に送るということは、そのぶん受け取るファイルが増えるということでもあります。フォントのファイルは思ったより重いので、読み込まれる短いあいだに文字が一瞬見えなくなったり、既定のフォントで出てから切り替わってちらついたりもします。ページを開いたとき、文字がワンテンポ遅れて形を整える経験は、ここから来ます。
だから Webフォントは速く届けることが大切です。先に扱った CDN とキャッシュが、ここでまた使われます。フォントのファイルを近くに置き、一度受け取ったフォントは再び受け取らないようにキャッシュしておけば、二度目の訪問からは文字がすぐに正しい形で出ます。とくに日本語のフォントは文字数が多くファイルがずっと重いので、この最適化がいっそう大切です。
フォントにも、ライセンスがあります #
フォントは、誰かがデザインしたれっきとした著作物です。だから好きに使えるわけではなく、用途に応じてライセンスを取得しておく必要があります。とくに Webフォントとして使うには別の許可が必要な場合が多く、印刷物には使えるフォントが Web では使えない、ということもあります。
何気なく使ったフォントのせいで、あとから費用を請求されることも珍しくありません。幸い、誰でも自由に使えるよう公開されたオープンソースのフォントもたくさんあります。Google が無料で提供するフォントが代表的です。先にオープンソースのライセンスを扱ったときのように、フォントも使う前に許される範囲を一度確認する習慣が安全です。
だから、フォントが崩れないようにするには #
肝心なのは二つです。見せたいフォントを Webフォントとして一緒に提供し、万が一受け取れなかったときに備えて、代わりのフォントをあらかじめ指定しておくことです。そうすれば Webフォントが遅れて出ても、文字が崩れず、似たフォントで自然に持ちこたえます。
これに加えて、フォントのファイルを軽く整え、CDN で速く届ければ、見栄えのよいフォントと速い画面を両立できます。
なぜ非開発者が知っておくと仕事が楽になるのか #
- フォントの事故を理解できます。 同じサイトが端末ごとに違って見えたり、文字が遅れて出たりする理由を知っていれば、問題を正確に伝えられます。
- ライセンスのリスクを知れます。 フォントにも使える範囲があると知っていれば、デザインにフォントを使うときに、許される範囲をまず確認するようになります。
- 性能も一緒に考えられます。 日本語の Webフォントが重いと知っていれば、フォントの数を無理に増やさず、画面の速さとのバランスを取れます。
まとめ #
今日は、Webフォントがフォントのファイルを一緒に送り、誰の画面でも同じ形で見えるようにすること、その代わりにダウンロードが増えて CDN とキャッシュが必要になること、そしてフォントにもライセンスが付くことを見てきました。フォントは送ってこそ見え、むやみに使ってはいけない著作物だ、というのが肝心です。
フォントに付くライセンスの全体像が気になればMIT・GPL・Apache ライセンスの違いをやさしく理解するを、Webフォントを速く届ける CDN とキャッシュが気になればなぜ「キャッシュを消してみて」と言うのか — キャッシュと CDNを一緒に読んでみることをおすすめします。