PageSpeed Insights ウェブフォント読み込み中のテキストの表示エラー

croitregoogle, ホームページ制作

さくらのwebフォントを利用しているサイトで、PageSpeed Insights　が ”ウェブフォント読み込み中のテキストの表示エラー”表示となったので、cssに以下のコードを追加しました。

エラー文はこちら↓

↓追加したcssはこちら

 6、13行目の
font-display: swap;
が重要な部分です。

@font-face {
     font-family: "Ryumin Regular KL","Maru Folk Medium";
     font-style: normal;
     font-weight: 400;
     src: url('https://webfonts.sakura.ne.jp/ab.ttf') format('ttf');
     font-display: swap;
 }
@font-face {
     font-family: "Ryumin Regular KL","Maru Folk Medium";
     font-style: normal;
     font-weight: 400;
     src: url('https://webfonts.sakura.ne.jp/ab.woff') format('woff');
     font-display: swap;
 }