フォントのチラつき解消法

酒井 琢郎のプロフィール画像
エンジニア 酒井 琢郎

2,120 view

エンジニアなら、開発中のウェブサイトでロード時に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つの要因を対策することは、フォントのチラつきだけでなくページ全体の読み込みの高速化にも効果的なので、いま作っているサイトが「遅いな…」と感じた時はひとまず試してみてほしい。

関連する日報

    ページネーションの必要性と表示件数の考え方

    1,080 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    価値を生み出すスピードの本質

    491 view

    奥原美穂子のプロフィール画像
    奥原美穂子 経営企画
    新入社員が気づいた、プロジェクト改善のヒント

    584 view

    奥原美穂子のプロフィール画像
    奥原美穂子 経営企画
    開発効率化:半分の工数で作る工夫

    1,716 view

    酒井 琢郎のプロフィール画像
    酒井 琢郎 エンジニア
    納得感のあるデザイン提案のポイント

    4,024 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
上に戻る