フォントが後から変わる理由：読み込み前後の表示
遊びを見つける執筆にClaudeを使用しています。
ブラウザゲームのページを開いたとき、タイトルが一瞬だけ素っ気ないゴシック体で表示され、すぐに明朝風の凝った書体へ切り替わる場面を考えてみます。切り替わった瞬間に文字幅が変わり、ボタンの位置が少し動くこともあります。これは画面の描画が壊れたのではなく、ブラウザがあらかじめ決められた手順どおりに動いた結果です。 この記事では、Webフォント(ページと一緒に配信されるフォントファイル)が届く前と後で、文字がどう扱われるのかを順に確かめます。あわせて、アソバースの公式作品について確認済みの事柄から「設計から読み取れること」を整理します。作品ごとにフォントがどう用意されているかは、確認済みの情報だけでは分からない部分があります。そこは作品を開いて確かめる手順を示します。
この記事の目次
ブラウザは「文字を先に出したい」
CSSのfont-familyは、使いたいフォントを優先順に並べたリストです。先頭のフォントが使えなければ次を試し、最後は端末にある汎用のフォントに落ち着きます。端末に入っていない書体を使いたいときは、@font-faceという指定でフォントファイルの場所をブラウザに教えます。これがWebフォントです。
Webフォントには次の特徴があります。
- ブラウザは、そのフォントで描く文字が実際に必要になった時点でダウンロードを始めます。ページを開いた直後に、宣言された全フォントを先回りして取得するわけではありません。
- ファイルが届くまでの間も、文字は何かの書体で描かなければなりません。
- 日本語のフォントは収録する文字数が多く、一般に欧文フォントよりファイルが大きくなりがちです。そのため「届くまでの時間」が目に見えやすくなります。
つまり「後から変わる」のは、読み込みを待つ間に代わりの書体(フォールバック)で表示し、届いた時点で差し替えるという、ブラウザの標準的な振る舞いです。文字を出さずに待つのか、代用で先に出すのかは、CSSのfont-displayという項目で作者が選べます。
表示の3つの時間帯と`font-display`
ブラウザはWebフォントの読み込み中を、おおまかに次の3つの時間帯で扱います。
- 文字を見えなくして待つ時間帯
- 代用フォントで表示しつつ、届いたら差し替える時間帯
- 差し替えをあきらめ、代用のままにする時間帯
font-displayの値は、この時間帯の長さを変えます。代表的な値の違いを表にします。
- block、届く前の見え方：しばらく文字が見えない、届いたとき：見えるようになり、Webフォントで表示される
- swap、届く前の見え方：すぐに代用フォントで表示される、届いたとき：後から置き換わる
- fallback、届く前の見え方：ごく短い間だけ見えず、その後は代用フォント、届いたとき：短い猶予内に届けば置き換わる
- optional、届く前の見え方：ごく短い間だけ見えず、その後は代用フォント、届いたとき：間に合わなければ、そのページでは代用のまま
各時間帯の具体的な長さはブラウザの実装によって異なります。数値を決め打ちせず、自分が使うブラウザで確かめるのが安全です。
題名の「後から変わる」現象が最も分かりやすく出るのはswapです。読みやすさを優先して先に文字を出す代わりに、置き換えの瞬間が見えます。blockでは置き換わりは見えにくい反面、文字が現れるまで空白の時間が生じます。optionalでは置き換えが起きない代わりに、初回訪問では意図した書体が見られないことがあります。どれが正解ということはなく、作品の性格に合わせた選択になります。
置き換わった瞬間に動くもの
書体が変わるとき、見た目の変化は字形だけではありません。同じ文字数でも、書体によって次の値が違うからです。
- 1文字の幅(特に欧文や数字)
- 行の高さと、文字の上下の余白
- 字面の大きさ(同じfont-sizeでも、書体によって大きく見えたり小さく見えたりします)
代用フォントが先に表示されている間に折り返し位置やボタンの幅が決まると、置き換えの瞬間に再計算が走り、周囲の要素が動きます。いわゆる「レイアウトのずれ」です。タイトルが2行から1行に変わる、ボタンの文字が枠からはみ出す、といった形で現れます。
ゲームでは、ずれが誤操作につながる点にも注意が要ります。置き換えの瞬間に、押そうとしていたボタンが動くことがあるからです。作る側は、次のような対策を検討できます。
- 重要なボタンには固定の幅と高さを与え、文字の幅に左右されないようにする
- 代用フォントを、字幅の近いものから選んで並べる
- タイトルのような大きな文字は、書体の差が目立ちやすいので特に確認する
- 必要な文字だけを収めた小さなフォントにして(サブセット化)、到着までの時間を短くする
アソバースの作品から読み取れること
ここからは、確認済みの事柄だけを根拠にします。
公式の13作品は、すべて独立したHTMLで、外部通信なしに動きます。また、作品ごとにタイトルの文字組みが異なります。縦組みの明朝、手描き文字、郵便ラベル、夜の標識、光の幾何学、メニュー風といった具合です。
この二つから、設計として次のことが読み取れます。
- 外部のフォント配信サービスへ問い合わせて書体を取得する構成ではありません。回線の状態によって、書体の到着が大きく遅れる状況は作りにくい設計です。
- 一方、「外部通信がない」ことは「置き換わりが一切ない」ことを意味しません。フォントがHTMLの中に埋め込まれている場合でも、ブラウザがそれを読み込んで使える状態にするには、わずかな時間がかかり得ます。
確認済みの情報だけでは、各作品のタイトルの書体が次のどれで実現されているかは分かりません。
- 作品に同梱したフォントファイル
- 利用者の端末に入っている書体
- CSSの図形や装飾による表現
- 画像
この部分は、作品を開いて確かめることになります。カバー画像は生成したアートワークで、ゲーム画面のスクリーンショットではありません。カバーの文字の見え方をそのままゲーム内の書体の根拠にはできないため、確かめるときはゲーム画面を開いて見ます。
もう一つ、日本語と英語の表示切り替えも関係します。サイトの言語設定に合わせて作品の表示が切り替わるので、言語を変えると別の文字が必要になり、書体の扱いが変わる可能性があります。ただし作者が入力した作品名や紹介文は書き換えられないと案内されています。切り替えで変わるのは作品内の表示文言であり、投稿作品の名前ではない点を区別しておきます。
投稿する人が知っておく条件
自作のゲームでフォントを同梱したい人にとって、アソバースの投稿条件のうち次の点が関わります。
- HTMLまたはZIPをアップロードでき、ZIPの場合は直下のindex.htmlが入口になります。素材は相対パスで指定します。
- アップロードは20MiB以内です。ZIPの展開後は合計100MiB、1,000ファイル以内、1ファイル30MiB以内です。
- サービスワーカーは対象外です。したがって、フォントを独自にキャッシュする仕組みをサービスワーカーで作ることはできません。
- ゲームはsandbox付きiframeで実行されます。外部のフォント配信先を使えるかどうかは、確認済みの案内には書かれていません。外部読み込みに頼る場合は、公開前の表示確認の段階で実際の見え方を確かめる必要があります。
日本語フォントのファイルは大きくなりやすいので、容量の上限を意識するなら、使う文字だけに絞る方法があります。ただし、サブセット化したフォントに含まれない文字は代用フォントで表示されます。入力欄やプレイヤー名など、あとから文字が増える場面があるゲームでは、収録外の文字がどう見えるかも確認しておきます。
自分で確かめる手順
作品で何が起きているかは、ブラウザの開発者ツールで確かめられます。操作名や配置はブラウザごとに異なるため、お使いのブラウザの表記に読み替えてください。
- 確かめたい作品を開き、開発者ツールを開きます。
- ネットワークの記録画面で、種類を「フォント」に絞ります。キャッシュを無効にする設定があればオンにします。
- 通信速度の制限(スロットリング)を遅めの設定にして、ページを再読み込みします。
- 記録にフォントのファイルが出るか、いつ読み込まれるか、表示が切り替わる瞬間があるかを観察します。
- 要素の検査画面から、タイトルの文字に実際に使われている書体を確認します。ブラウザによっては「レンダリングされたフォント」のような項目に表示されます。
- 同じ画面で、font-familyの指定と、実際に使われている書体が一致しているかを見比べます。
コンソールが使えるなら、読み込み状況を次の短いコードで確認できます。作品はiframeの中で動くため、コンソールの実行対象を作品側のフレームに切り替えてから実行します。
document.fonts.ready.then(() => {
console.log('全体の状態:', document.fonts.status);
document.fonts.forEach(f => console.log(f.family, f.status));
});@font-faceで宣言されたフォントの名前と、読み込みの状態(loadedなど)が一覧になります。一覧が空なら、その作品はWebフォントの宣言を使っていないということです。
結果の読み方
- フォントの通信が記録に出ない、かつ一覧が空: 端末の書体、CSSの表現、画像のいずれかで見せている可能性が高いです。
- 通信は出ないのに一覧にはloadedが並ぶ: HTMLなどにフォントが埋め込まれている可能性があります。
- 実際の書体がfont-familyの先頭と違う: 代用フォントが使われています。端末に指定の書体がないか、読み込みに失敗しています。
起こりやすい誤り
- 一度表示したあとはキャッシュが効き、置き換えが見えなくなります。確かめるたびにキャッシュを無効にするか、閲覧データを消して試します。
- 端末に同名の書体が入っていると、Webフォントを使わず端末のものが選ばれ、差が出ません。別の端末や別のブラウザでも見比べます。
- ブラウザごとに、待つ時間や置き換えの扱いが少し違います。一つの環境の見え方を、すべての環境に当てはめないようにします。
- 速度を制限していない状態では、置き換えが一瞬すぎて気づけないことがあります。
次の行動
気になる作品を一つ選び、開発者ツールでフォントの通信と実際に使われている書体を確かめてみてください。言語を日本語と英語で切り替えて、書体の扱いが変わるかを見ると、作品の作りが一段深く分かります。自作のゲームを投稿する予定があるなら、重要なボタンの幅を固定し、代用フォントの状態でも崩れないかを公開前の表示確認で見ておくと安心です。
参考資料
- MDN Web Docs「font-display」
- MDN Web Docs「CSS Font Loading API」
- W3C「CSS Fonts Module」
