電話番号の入力欄のプレースホルダーで、数字だけ書体が違って見えました。原因は、Googleフォントのtext=指定から、一部の数字が漏れていたことでした。
電話番号の数字だけ書体が違って表示された
LPの納品前に、電話番号の入力欄のプレースホルダーを確認すると、数字だけが他の文字と違う書体で表示されていました。
text=指定は使う文字だけを配信する
Googleフォントには、text=というパラメータがあります。指定した文字だけを含むフォントを配信するため、ファイルが小さくなり、表示が速くなります。このLPでは、表示速度を改善するために、text=で使う文字だけに絞っていました。
text=指定から数字の6・7・9が漏れていた
絞り込みに使った文字の一覧を、コミット履歴で確認しました。Googleフォントのtext=に入っていた数字は、0、1、2、3、4、5、8の7つだけで、6、7、9が抜けていました。
text=に含まれない文字は、配信されるフォントファイルに入りません。そのため、6・7・9は指定したフォントでは描画できず、次の候補のフォントで表示されていました。
Googleフォントが配信するフォントの確かめ方
text=に0123458を指定して、使用するGoogleフォントを取得し、含まれる文字を調べました。返ってきたCSSには、次のunicode-rangeが書かれていました。
unicode-range: U+30-35, U+38;これは、0から5と8だけを示しています。取得したフォントファイルの文字を、PythonのfontToolsで調べても、含まれる数字は0123458でした。
比較のために、text=0123456789でも取得しました。ファイルサイズは、10,116バイトから12,156バイトになり、約2KBの増加でした。数字をすべて入れても、表示速度への影響は小さいと分かりました。
text=に数字・英字・記号を網羅して直す
数字は、0123456789の10文字をすべて入れ、英字と記号も、使う可能性のあるものを網羅しました。修正後のtext=は、数字・英字・記号を網羅した71文字に変更しました。
ただし、氏名のように自由に入力される漢字は、text=では拾いきれないのが問題が浮上しました。これは、日本語フォントをtext=で絞ると自由入力の漢字の書体が変わる事象を経験したに書いています。
結論
今回の原因は、text=に指定した数字が、7つしかなかったことでした。ページの文字から抜き出して絞るだけでは、使う文字が漏れることがあります。数字・英字・記号は、使うかどうかに関わらず、網羅するようにしています。