【Webフォント】日本語Webフォントがすぐに表示されない場合の対処法

はじめに

私たちが普段見ている様々なサイトでデザイン性を高めるために「Webフォント」が使用されています。
Webフォントを使用するメリットはたくさんあり、「どのブラウザで見ても同じ表示になる」や「文字を画像で表示しないためSEOの効果を維持できる」などがあげられます。
しかし、メリットの反面デメリットもあります。WEBフォントの読み込みが遅く、最悪の場合「サイトが表示されてから数秒の間文字が表示されない」なんていう事象が発生する可能性があるのです。
特に日本語は漢字・ひらがな・カタカナと英語圏のアルファベットに比べると桁違いに文字が多いため、フォントデータのサイズも大きくなってしまいます。
今回はWebフォントのメリットを享受しつつデメリットを打ち消す方法を紹介します。
※一般的な方法なので「そんなの当たり前じゃん」と思う方もいると思いますがご了承ください。

確認方法

「目視だとわからない・・・。」という方はGoogleのPageSpeed Insight(ページスピードイン)等のパフォーマンス測定サイトで確認してください。
※PageSpeed Insightの使用方法は割愛します。

以下のような表示になる場合は「サイトが表示されてから数秒の間文字が表示されない」可能性があります。

対処方法

「Webフォントが読み込まれるまで、とりあえず通常のフォントで文字を表示させておく」という設定をします。
基本的に「font-display: swap;」の指定をするだけで完了です。
では具体的に説明します。

１.一般的なWebフォントの場合

font-face内に「font-display: swap;」の指定をするだけです。
※下記コードの一番下

@font-face {
  font-family: 'hogefont';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.hoge.com/hoge/hoge/hoge.woff2) format('woff2');
  font-display: swap;
}

２.Googleフォントを使っている場合

Googleフォント（Google Fonts）はGoogleが提供しているWebフォントサービスです。
すべて無料で利用可能で、かつ商用利用にも対応しています。日本語フォントも豊富なため、Webフォントを利用する方はまずGoogleフォントを選択肢の一つに入れるのではないでしょうか。Googleフォントでの指定方法も紹介します。

Googleフォントを使っている場合は、埋め込みタグのURLに「&display=swap」を追加してください。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap" rel="stylesheet">

デフォルトの埋め込みタグは下記図の赤枠のように「&display=swap」が付いた状態ですが、ブログ等で紹介されているタグには付いていないことも考えられるため注意してください。

再度パフォーマンス測定サイトで確認

対応後にパフォーマンス測定サイトで確認し、以下の表示になっていることを確認してください。

先程は赤い三角印だったものが緑の丸になっています。
※GoogleのPageSpeed Insightで確認しています。

これでWebフォントのメリットを享受しつつデメリットを打ち消すことが出来ました。