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

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

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

関連する日報

    フリー素材のアイコン・イラストを流用する時のコツ

    2,486 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,159 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,491 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
    ベイジディレクターのリアル

    2,541 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
    BtoBサイトにおける「ファーストビュー攻略法」

    2,869 view

    池田 彩華のプロフィール画像
    池田 彩華 デザイナー
上に戻る