Webフォントを使わないという選択: 端末の文字だけで表示している話
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
英語のサイトに比べて、日本語のサイトでWeb用のフォントを使うと、とにかく重くなりやすいそうです。日本語は漢字がたくさんあるので、全部の文字を一つのファイルに詰めるとかなり大きくなり、最初の表示が遅くなる原因になります。
先に結論を書いてしまうと、私のサイトでは、Web用のフォントを一つも読み込んでいません。本文も見出しもロゴも、端末に元から入っている文字だけで表示しています。調べているうちに、自分の規模では入れないまま今に至っている、という感じです。この記事では、いま実際に指定している中身と、調べたうえで見送った選択肢をまとめます。
いま指定している中身
私のサイトが使っているのは、端末に元から入っている文字だけです。機種ごとに入っている文字は違うので、「この機種ならこの文字」というのを順番に並べて指定しておきます。
実際の指定は、Apple系の標準フォント、ヒラギノ、Noto Sans JP、Helvetica Neue の順に並べ、当てはまるものが無ければ端末側の標準的な文字に任せる、という形です。Windows向けの文字は個別には指定していません。コードを載せる部分だけは、文字幅のそろった別の並びを使っています。
この形の良いところは、とにかく待ち時間が発生しないことです。読み込むファイルが増えないので、初めて来た人でも文字がすぐ出ます。悪いところは、見た目が環境によって少しずつ変わることです。私は前者を取りました。
調べたこと1: 文字が出ない待ち時間と、後から差し替える方式
Web用のフォントを読み込んでいる間、文字をどう見せるかには大きく2つのやり方があるそうです。ひとつは、フォントが届くまで本文を表示しない「文字が出ない待ち時間が出る方式」（FOIT）。もうひとつは、まず端末に元から入っている文字で表示しておいて、Web用のフォントが届いたら差し替える「先に手元の文字で表示して、後からWeb用の文字に差し替える方式」（FOUT）です。
このあたりは font-display という設定で選べるようになっていて、待つか、先に見せてしまうかを指定できるとのことでした。待ち時間が出る方式は、読み始めが遅れます。先に手元の文字で見せる方式は、文字の見た目がいったん切り替わる瞬間はあるものの、すぐに読み始められます。
「間に合わなければWeb用のフォントはあきらめて、手元の文字のままにする」という考え方の設定もあるそうです。回線が遅い端末を想定したいときに向いているようですが、見た目がそろわなくなる場合もあるので、使うなら慎重に、という感じだと思います。
私のサイトはWeb用のフォント自体を読み込んでいないので、この設定は使っていません。
調べたこと2: 日本語フォントの容量問題
日本語のフォントは漢字を含むぶん、ファイルがどうしても大きくなります。よく使われる無料のWeb用フォントでも、全部入りにすると数MBを超えることがあるそうです。
軽くする工夫としては、使う文字だけを入れた軽いフォントを用意する方法や、漢字をいくつかのまとまりに分けておいて、そのページで実際に使う字のぶんだけ読み込ませる方法があるそうです。Google Fonts のような配信サービスが、こういう分割を自動でやってくれることもあるとのことでした。
調べたこと3: 自前で置くか、配信サービスを使うか
もし使うとしたら、配信サービスを使うか、自分のサイトにフォントのファイルを置くかを選ぶことになります。配信サービスの良いところは、自分でフォント配信の仕組みを細かく持たなくて済むことです。一方で、最近のブラウザではキャッシュの扱いも変わってきているので、「他のサイトで読み込まれたフォントがそのまま共有される」とは期待しないほうがよさそうです。外のドメインから読み込むこと自体を避けたい場面では、自分のサイトに置く選択肢もあります。
自分で置く場合は、軽い形式のファイルで配って、しばらく手元に取っておいてもらう設定にしておくと、二度目に来た人の読み込みが速くなるそうです。使う文字だけ入れた軽いフォントも自分で作れるようですが、その手間は増えることになりそうです。
「ページの先頭で先回りして取りに行く指示を入れる」という手もあるそうです。ただ、こういう先回りを詰め込みすぎると、ブラウザの中で優先順位の取り合いになって、かえって見た目を整えるための読み込みを遅らせることもあるとのことでした。
いまのところは、使わないままでいます
フォント周りは一度決めると触る機会が少ないのですが、初めて来た人の印象に直で効く部分でもあります。私の場合は「読み込むものを増やさない」ほうを選んで、端末に入っている文字だけで表示しています。
見た目に強いこだわりが出てきたら、そのときにまた考えることになりそうです。いまのところは、待ち時間が無いことのほうが自分には合っている、という状態です。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ