はじめに
Webフォントの実装は、モダンなWebサイト制作において避けては通れない技術要素となっています。
しかし、適切な最適化なしでWebフォントを実装すると、サイトのパフォーマンスに大きな影響を与えてしまいます。
「Lighthouseのスコアが低い」「First Contentful Paintが遅い」といった指摘を受けたことはありませんか？
実は、その原因の多くはWebフォントの読み込み方法に問題があるケースが少なくありません。
この記事では、実際のプロジェクトで使える具体的なWebフォント最適化テクニックを、コード例とパフォーマンスへの影響を交えながら解説していきますので、ぜひ参考にしてみてください。
1. Webフォント最適化の基本
今までのWebフォントの実装は以下のようなコードを書いていました。
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
}
body {
font-family: 'CustomFont', sans-serif;
}一見シンプルに見えるこの実装ですが、実際はいくつかの問題があります。
特に深刻なのが、フォントの読み込みがブロッキングリソースとなり、ページの表示速度に大きな影響を与えることです。
この問題に対処するための第一歩は、font-displayプロパティの適切な設定です。
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: swap;
}font-display: swapを設定することで、フォントの読み込み中でもテキストが表示され、ユーザーはコンテンツをすぐに読み始めることができます。
さらに、以下のようにプリロードを活用することで、フォントの読み込みタイミングを最適化できます。
<link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>これらの基本的な最適化に加えて、フォントファイル自体の最適化も重要です。
WOFFフォーマットの使用やサブセット化による容量削減は、特に日本語フォントを使用する際に大きな効果を発揮します。
2. Webフォントの最適化実装手順
まず、Font Loading APIを利用してフォントの読み込みを制御する実装例を見ていきましょう。
const FontLoader = {
init() {
if ('fonts' in document) {
const font = new FontFace('CustomFont',
'url(/fonts/custom-font-subset.woff2)', {
display: 'swap',
unicodeRange: 'U+0-7F, U+4E00-9FFF' // 日英字のみ対象
});
font.load().then(() => {
document.fonts.add(font);
document.documentElement.classList.add('fonts-loaded');
});
}
}
};このコードでは、必要な文字のみを含むサブセットフォントを使用し、Font Loading APIで読み込み状態を管理します。
続いて、CSSで段階的な表示を実現します。
/* フォールバックフォントでの表示 */
.element {
font-family: sans-serif;
}
/* カスタムフォント読み込み後の表示 */
.fonts-loaded .element {
font-family: 'CustomFont', sans-serif;
}この実装により、フォントの読み込み完了を待たずにコンテンツを表示し、フォント読み込み後は自然に切り替わる挙動を実現できます。
3. 注意点
ブラウザ間の挙動の違い
実装時に最も注意が必要なのは、ブラウザごとのフォントローディングの挙動の違いです。
特にSafariとChromiumベースのブラウザでは、font-displayの処理に微妙な違いがあります。
/* Safari での追加対応 */
@supports (-webkit-hyphens:none) {
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: optional; /* より安全な設定 */
}
}よくあるトラブルと解決方法
最もよく遭遇する問題が、Cumulative Layout Shift（CLS）の発生です。
これは特に日本語フォントを使用する際に顕著です。
以下の実装で対策が可能です：
.heading {
font-family: 'CustomFont', sans-serif;
/* フォールバックフォントとのサイズ差を調整 */
font-size-adjust: 0.5;
/* 最小限の高さを確保 */
min-height: 1.2em;
}さいごに
Webフォントの最適化は、Web開発において避けては通れない重要な要素です。
本記事で解説した実装テクニックを活用することで、パフォーマンスを損なうことなく、魅力的なタイポグラフィを実現できますので、ぜひ参考に実装してみてください。
関連記事
