問い合わせフォームの自由入力欄では、入力された漢字によって、書体が変わることがあります。原因は、Googleフォントのtext=が、指定した文字しか配信しないことでした。この記事では、制作会社のディレクターに3つの方針を提案し、入力欄にシステムフォントを指定する方法に決めた経緯をまとめます。
この記事は、Webフォントの数字だけ書体が違う原因の続きとなっています。
自由入力欄の漢字だけ別のフォントで表示される
LPの表示速度を改善するために、Noto Sans JPは、固定文言で使う文字だけをtext=で指定していました。この状態で、PageSpeed Insightsの点数は88点まで上がりました。
text=は、使う文字を指定して、その文字だけを入れたフォントを配信してもらう、Googleフォントの指定です。詳しくは、前の記事に書いています。
一方、問い合わせフォームの氏名や内容の欄には、ユーザーが自由に文字を入力します。どの漢字が入力されるかは、事前に分かりません。text=に含まれない漢字は、Noto Sans JPでは描画できず、別のフォントで表示されます。入力した文字によって、Noto Sans JPと別のフォントが混ざる可能性がありました。
text=を続けるかどうかの3つの方針
制作会社のディレクターに、次の3つの方針を提案しました。
- 方針1：自由入力欄は別フォントへの切り替わりを許容し、
text=による軽量化を優先する。 - 方針2：JISなど一定の文字範囲でサブセット化し、軽量化とフォント統一を両立する。
- 方針3：
text=による絞り込みをやめ、Noto Sans JPを広い文字範囲で読み込み、フォントの統一を優先する。
サブセット化とは、フォントのファイルから、使う文字だけを取り出して、小さいファイルを作ることです。方針2は、すべての漢字を手作業で選ぶのではなく、一定の文字規格に基づいて範囲を決める想定でした。
3つの方針で読み込むデータ量を比べる
3つの方針で、ページを開いたときに読み込むデータの量を比べました。固定文言で使う641文字を表示する場合の値です。
方針1：text=で絞る（現在）
Googleフォントが、641文字だけを入れたフォントのファイルを作って配信します。CSSは15,228バイト、フォントのファイルは207,684バイトでした。この状態で、PageSpeed Insightsは88点でした。
方針2：JISの範囲で作るサブセット
自前で作ったサブセットには、JIS第1水準の漢字をすべて含む3,294字の漢字が入っていました。JIS第1水準は、日本産業規格（JIS）が定めた漢字の分類のうち、日常でよく使う2,965字の範囲です。woff2は、Web用に圧縮されたフォントのファイル形式です。このファイルのサイズは、1,038,300バイト、約1MBでした。ページで使う文字にかかわらず、このファイル全体を読み込みます。
このファイルは、CSSの@font-faceで読み込みます。@font-faceは、自分で用意したフォントのファイルを、CSSで使えるようにするための書き方です。太さを表すfont-weightは、100から900までを、このファイル1つで受け持つ指定にしていました。
当時の記録では、約3,000字を取り込んだサブセットで、PageSpeed Insightsは87点でした。この時点では、font-weightに不具合が出ていて、修正している最中でした。方針1の88点と、ほぼ同じ点数です。
方針3：絞り込みなしで読み込む
絞り込みをやめると、GoogleフォントのCSSには、@font-faceがずらりと並びます。方針2と同じ書き方ですが、こちらは、フォントのファイルが文字の範囲ごとに複数に分かれています。
unicode-rangeは、そのファイルが受け持つ文字の範囲を、ブラウザに伝える指定です。ブラウザは、ページに表示する文字が含まれる範囲のファイルだけを読み込みます。
日本語のフォントは文字の数が多いため、Googleフォントは、文字の範囲ごとに124個のファイルに分けて配信しています。太さは400・500・700の3つあるため、@font-faceは124×3で372個になり、CSSだけで342,195バイトになります。
641文字を表示するために必要なファイルは51個で、合計618,532バイトでした。
比較
| 方針 | CSS | フォントのファイル | 合計 |
|---|---|---|---|
| 方針1：text=で絞る | 15,228バイト | 207,684バイト（1個） | 222,912バイト |
| 方針2：JISのサブセット | 小さい（未計測） | 1,038,300バイト（1個） | 約1,038,300バイト |
| 方針3：絞り込みなし | 342,195バイト | 618,532バイト（51個） | 960,727バイト |
方針2と方針3は、合計がほぼ同じでした。方針3は、フォームに別の漢字が入力されると、その漢字を含むファイルが追加で読み込まれるため、データの量はさらに増えます。方針1は、方針2・3の約4分の1の量でした。
入力欄にシステムフォントを指定する方針に決定
デ方針2でサブセットを実装しテストしていると、ディレクターから、方針1で対応する依頼がありました。内容は、次の2点です。
- 固定文言は、
text=で絞ったままにする。 inputとtextareaには、最初からシステムフォントを明示して指定し、入力欄の中は常に統一する。
システムフォントとは、WindowsやMac、iPhoneなど、ユーザーの端末に最初から入っているフォントのことです。ファイルをダウンロードする必要がなく、入力された文字は、どの漢字でも、同じフォントで表示されます。
自前のサブセットとその@font-faceは削除しました。入力欄には、font-family（使うフォントを指定するCSSのプロパティ）で、游ゴシックやヒラギノ角ゴシックなど、ユーザーの端末に入っているフォントを指定しました。端末にあるフォントを、順に探して使う指定です。
これで、入力欄の中は、入力された文字にかかわらず、同じシステムフォントで表示されます。
結論
今回の対応は、事前に文字を決められない入力欄を、Webフォントで追いかけるのをやめることでした。text=で軽量化したページでは、自由入力の欄にシステムフォントを指定すればよいと学べた、よい経験になりました。