Webフォントを読み込む前に代替フォントで表示する

font-displayプロパティを使って、Webフォントを読み込む前に代替フォントで表示するようにしてみます。

対応ブラウザ

対応ブラウザはこちら
IEとedge以外では使用できるようです。

サンプルコード

まずは特に対応しないで実装してみます。

CSS

@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 400;
	src: url("NotoSerifCJKjp-Regular.woff") format("woff");
}
body {
	font-family: 'Noto Serif JP', serif;
}

この場合、Webフォントを読み込むまでの一定時間はフォントが表示されず、読み込み後にフォントが表示されるようになります。
対応前のデモページ

font-display: swap;を指定することで、Webフォントを読み込むまでの間も代替フォントで表示されるようになります。

CSS

@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 400;
	src: url("NotoSerifCJKjp-Regular.woff") format("woff");
	font-display: swap;
}

対応後のデモページ
注意点として、Google FontsのCDNを利用して読み込む場合、@font-face内に記述ができないためfont-displayを使用することができません。
　

【参考サイト】

• font-display – CSS: カスケーディングスタイルシート | MDN