エンジニアなら、開発中のウェブサイトでロード時にWebフォントが適用されるまでに一瞬タイムラグがあるという現象に遭遇したことは一度くらいあるのではないだろうか。俗に言う「フォントのチラつき」問題だ。NotoSansJPなど重い日本語フォントを指定したときに発生しがちだ。
今回、私が遭遇したのはあるプロジェクトでYaku Han JPフォントを指定したときのことだ。この動画のように「（）」に対するフォント適用が遅れてしまって、テキスト全体の長さが一瞬変わってしまっている。
※Yaku Han JPとは「、」や「。」、「（）」といった標準のフォントで文字詰されない記号などを専用のフォントに置き換えて文字詰めするというもの。
ローカルで開発しているときはほとんどこの問題は発生せず、サーバに実際に設置して通信に時間がかかるようになってから起こることがほとんどだ。ここでは、見落としがちだが比較的簡単に対応できるいくつかの対処法を記していく。
不要なフォントを読み込んでいないか
実際には使用していないフォントや、使っていないウェイト（太さ）のフォントを読み込んでいないか。例えフォントを指定していなくても、HTMLの<head>タグ内やCSSの@importで読み込みを宣言している時点でそのフォントの読み込みは行われてしまう。1種類のフォントを削るだけでも読み込みの速度は変わるので、不要なフォントはなるべく読み込まないようにする。
フォントの読み込みをCSSの@importで行っていないか
CSSの@importを使用すると、その分HTTPリクエストが増えることになりレンダリングがブロックされて読み込みが遅くなる。@importの代わりにHTMLの<head>内で<link>タグを使用してWebフォントを読み込むようにする。
CSSの容量が重たくないか
CSSも容量が重ければ重いほど、ダウンロードにかかる時間は長くなってしまい、レンダリングブロックの原因となってしまう。その結果、フォントがあとから適用されてしまうように見えることもある。使っていないスタイルは削除するのはもちろんのこと、圧縮も軽量化に効果があるので行うべきだ。
特にCSSの容量については不要な記述の整理と圧縮で20%ほど軽量化することができた。今回挙げたこれらの3つの要因を対策することは、フォントのチラつきだけでなくページ全体の読み込みの高速化にも効果的なので、いま作っているサイトが「遅いな…」と感じた時はひとまず試してみてほしい。
