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フォント
