Adobe Fonts読み込み時のガタつきを解消！CSSで実装するスムーズなローディング

Webフォントはブランドの魅力や世界観を伝えるための重要な要素の1つですが、一方でファイルサイズが大きいフォント、特に日本語Webフォントを大量に読み込むページの表示などは、レイアウトやローディングにも大きく関わってきます。
先日もお客様からこんなご相談をいただきました。

お客様

Adobe Fontsを利用してますが、ページ読み込み時にカクついたり、途中でレイアウトがガタガタ動くので悩んでます。何かスムーズにローディングさせる方法はありますか？

そこで今回は、Adobe Fontsのローディング時のガタつきを解消できる、CSSアニメーションの実装方法についてご紹介します。

Adobe FontsのCSS用フォントイベント
Adobe Fonts読み込み用CSSのサンプルコード
Adobe Fontsローディングのデモ
- CSSアニメーションのデモ表示
まとめ

Adobe FontsのCSS用フォントイベント

Webフォントの読み込み時に何も対策を施さないと、フォントの切り替わりが突然発生し、ページの表示が不自然になることがあります。
こういった問題を避けるために、Adobe FontsではあらかじめCSSやJavaScriptによるフォントイベントが用意されています。

Adobeがフォントイベントとして用意しているCSSは下記の3つです。
フォントの読み込みステータスに応じて、HTMLタグにCSSクラス名が付与されます。

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

読み込み（.wf-loading）：Webフォントの読み込み中
アクティブ（.wf-active）：Webフォントがアクティブな状態
非アクティブ（.wf-inactive）：Webフォントの読み込みに失敗した状態

参考）フォントイベント｜Adobe Fonts公式サイト
https://helpx.adobe.com/jp/fonts/using/font-events.html

お客様

なるほど、Adobe側で読み込みステータスに応じたCSSのクラスを用意してくれているんですね！これを使えば、ローディングアニメーションも実装できそうですね。

Adobe Fonts読み込み用CSSのサンプルコード

1. シンプルなフェードイン

下記のサンプルコードは、最もシンプルなCSSでの実装方法です。

Adobe Fontsのローディングが完了すると、id="contents"が付与されたコンテンツに対し、0.3秒かけてフェードインで表示させます。

/* ローディング中のスタイル */
.wf-loading #contents {
	opacity: 0;
}

/* フォント読み込み完了後のスタイル */
.wf-active #contents {
	opacity: 1;
	transition: opacity 0.3s ease;
}

/* フォント読み込み失敗時のスタイル */
.wf-inactive #contents {
	opacity: 1;
}

2. スライド＆フェードイン

フェードインでアニメーション表示させつつ、同時に下から上へとコンテンツが浮き上がってくる動きを実現します。

/* ローディング中のスタイル */
.wf-loading #contents {
	opacity: 0;
	transform: translateY(20px);
}

/* フォント読み込み完了後のスタイル */
.wf-active #contents {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* フォント読み込み失敗時のスタイル */
.wf-inactive #contents {
	opacity: 1;
}

translateY(20px)の数値を変えたり、translateXへ変更することで、上から下へのスライド効果だけでなく、｢下から上へ」｢右から左へ」など、様々な方向のスライドアニメーションを実装することができます。

3. ズームイン＆フェードイン

小さめのサイズから徐々に本来のサイズまで拡大表示します。

.wf-loading #contents {
	opacity: 0;
	transform: scale(0.95);
}
.wf-active #contents {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

4. ブラー効果＆フェードイン

ぼかし効果から徐々にクリアになっていく演出です。

.wf-loading #contents {
	opacity: 0;
	filter: blur(5px);
}
.wf-active #contents {
	opacity: 1;
	filter: blur(0);
	transition: opacity 0.7s ease, filter 0.7s ease;
}