Web フォントの読み込み中にユーザーがテキストを読めるようにしてください

当サイトはアフィリエイト広告を利用しています

解決方法

cssに

@font-face {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
src:url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.woff2") format("woff2");
font-display: swap;
 }
@font-face {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
src:url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.woff2") format("woff2");
font-display: swap;
 }

<head>~</head>に

<link rel="preload prefetch" as="font" type="font/woff2" href="https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.woff2" crossorigin>

を追加する。

この記事を書いた人

目次