Webフォント待ちの表示を確認する：代替書体とswapで本文を残す

Webフォントを指定したページで、通信が遅い間だけ見出しが空白になる。読み込みを待たず文章を読めるようにするには、代替フォントと読み込み方針を一緒に決めます。Webフォント待ちの表示を確認するため、未取得・取得後・取得失敗を同じ原稿で比べます。

HTMLとCSSの基本が分かる人向けに、架空の雑誌紹介を作ります。欧文見出しへ一つのWebフォントを使い、日本語の本文は端末の標準書体で表示します。フォントの選び方全般や通信速度の測定ではなく、指定の書体が届かない間も必要な文字を読めることが目標です。

フォント名の指定と、ファイルの取得は別の段階

@font-faceでフォントファイルの場所と名前を登録し、font-familyでその名前を使います。CSSに名前があるだけでは、端末へファイルが届いたことになりません。利用できない間や、必要な文字をそのフォントが持たない場合には、後ろの候補へ進みます。この選択はfont-familyの説明でも確認できます。

MDNの@font-faceの説明で、srcとfont-familyの関係を確認できます。今回の欧文フォントが日本語も含むとは限らないため、日本語が違う形に見えることを、すぐ読み込み失敗と判断しません。

font-displayは、読み込み中にどのように代替表示し、いつ切り替えるかの方針です。swapは非常に短い非表示期間の後に代替表示を使い、フォントが届けば切り替える方針です。「一瞬も空白にならない」「必ず同じ秒数で変わる」という保証ではありません。

詳しい期間の区分はfont-displayの資料にあります。本文を早く読ませたい今回の例ではswapを選び、遅れて切り替わった後にも内容が欠けないかを調べます。

通信を待つ見出しと、待たない本文を一枚に置く

新しい練習フォルダに、Webで利用してよい欧文のWOFF2ファイルをpractice.woff2として置きます。手元にない場合は、このサイトで使うGeistのファイルを保存して練習できます。ライセンス文も同じフォルダへ保存してください。これは欧文用のファイルなので、日本語の書体を確認する素材には使いません。

次をindex.htmlへ保存します。srcはこのHTML内のstyleから見た同じフォルダを指します。CSSを別ファイルへ移す場合は、そのCSSから見たURLへ合わせます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>雑誌紹介｜フォント待機の練習</title>
<style>
@font-face {
  font-family: "Practice Sans";
  src: url("./practice.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
* { box-sizing: border-box; }
body { margin: 16px; color: #222; font-family: sans-serif; line-height: 1.8; }
main { max-width: 560px; margin: auto; }
h1 {
  font-family: "Practice Sans", Georgia, serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
p { margin-block: 16px; }
</style>
</head>
<body>
<main>
<p>架空の雑誌紹介・フォント表示の練習</p>
<h1 lang="en">Field Notes for Small Workshops</h1>
<p>町の小さな工房を紹介する雑誌です。制作の道具と手順を読み進められます。</p>
<p>見出しの読み込み中も、この説明は表示します。</p>
</main>
</body>
</html>

Python 3が使えるなら、同じ場所でpython3 -m http.server 8768 --bind 127.0.0.1を実行し、http://127.0.0.1:8768/を開きます。停止はCtrl+Cです。初回の確認では、Networkでpractice.woff2が取得でき、表示に使われた書体を開発者ツールのRendered Fontsなどで調べます。

font-familyの計算済みの値にPractice Sansが並んでいるだけでは、実際にそのフォントで描かれた証明にはなりません。指定候補と使用された書体を区別します。今回の代替には違いを観察しやすいセリフ体を使いますが、実際のデザインでは大きさや幅が近い候補も比較してください。

一度の正常表示では見えない、二つの条件

遅い通信の確認では、開発者ツールでキャッシュを無効にし、低速の通信条件を選んで再読み込みします。具体的な操作はChrome DevToolsのNetwork資料を参照できます。フォントが保存済みだと、待つ場面を観察できないことがあります。

フォントへの通信がPendingの間に、欧文見出しと日本語本文が読めるか見ます。取得が終わったら、見出しの形が変わっても文字が欠けず、本文へ重ならないかを確認します。フォントが小さいと低速設定でもすぐ終わる場合があるので、待機を観察できなかった結果を成功と記録しません。

別の条件として、練習ファイル名を一時的にpractice-off.woff2へ変え、HTMLの参照先はそのままにして読み直します。404になったままでも見出しが代替書体で読めるのが期待結果です。確認後はファイル名を戻し、取得成功の状態へ戻してください。

これは更新CSSとキャッシュを調べる記事のように、古い版の配信を直す作業ではありません。今回は未着または不着のフォントに対し、文章を表示し続ける条件を確かめています。

swapが効かない場所と、切り替え後に欠ける箱

一つ目の失敗は、h1の通常のCSS規則へfont-displayを書き込むことです。これは@font-faceの中で指定する記述子なので、見出し側へ書いても読み込み方針は設定できません。修正は@font-faceの内側へ移すことです。再確認ではキャッシュなしの低速条件で、待機中の文字が読めるかを見ます。

書いたはずの規則が使われない場合は、font-familyの綴りも照合します。フォント名が一致していなければ、そもそもそのファイルを使う要求が起きないことがあります。CSSの適用元を調べる手順で、見出しの指定まで届いているかを先に調べます。

二つ目の失敗は、見出しへ一行分の固定heightとoverflow: hiddenを付けることです。代替書体では一行でも、取得後の字幅が違って二行になり、後半が消える場合があります。swapは字幅を同一にする指定ではありません。

修正ではこの見出しの固定高さと切り抜きを外し、内容に応じて高さが伸びるようにします。取得失敗時と成功時を同じ幅で比べ、どちらも最後のWorkshopsまで読め、次の段落へ重ならないか再確認します。単位なしの行間を使っても、箱の高さを固定したままでは欠けを解決できません。

指定の書体を待つ価値がある場所か

本文すべてにWebフォントを使うかは、読みやすさ、書体の役割、通信量を含めて判断します。この教材は一つの見出しだけですが、それを理由にどのページでも同じ構成が最適とは言えません。指定の字形でなければ伝わらないロゴは、通常の本文と別の素材として考える場合もあります。

optionalを選ぶなら、取得した書体へその閲覧中に必ず切り替わることを完成条件にはしません。システムフォントだけにするなら、外部フォントの通信は不要になります。その場合も異なる端末で文章が収まるかという確認は残ります。

また、preloadで早めに取得し始めても、通信失敗がなくなるわけではありません。取得を速める工夫と、取得できないときの表示設計を混ぜず、まず代替状態だけでも読める画面を作ります。

同じ幅で三枚の記録を残す

15分程度を目安に、未取得の待機中、取得成功、ファイル名を変えた失敗の三条件で記録します。待機中は文字が読める、成功後は使用書体を確認できる、失敗しても全文が残る、が今回の三つの判定です。

幅320pxでも同じ原稿を使い、見出しの末尾と次の段落が重ならないかを見てください。書体が変わったときの改行位置は一致しなくても構いません。変わることを前提に本文の場所が確保されているかが重要です。レスポンシブCSSの無料レッスンで幅を調べる際にも、読み込み成功後だけでなく代替表示の記録を一枚加えてみましょう。