web-dev-qa-db-ja.com

ウェブフォントの読み込み中にテキストが表示されたままになり、Google PageSpeed Insightsで解決されないようにする

CSSにfont-display: fallbackを追加した後でも、webfontの読み込みの問題がgoogle pagespeedの洞察レポートで解決されない間、テキストが表示されたままであることを確認します。

どうすれば問題を解決できますか？

@font-face {
  font-family: Jura;
  src: url(../fonts/Jura-Regular.eot);
  src: url(../fonts/Jura-Regular.eot?#iefix) format('embedded-opentype'), url(../fonts/Jura-Regular.woff2) format('woff2'), url(../fonts/Jura-Regular.woff) format('woff'), url(../fonts/Jura-Regular.ttf) format('truetype'), url(../fonts/Jura-Regular.svg#svgFontName) format('svg');
  font-weight: 400;
  font-display: fallback;
}
google-pagespeed
8
Hiran Narayanan

Font-display：swapを追加してそれを取り除きました。

@font-face{
    font-family:FontAwesome;
    font-display: swap;
    src:url(fonts/fontawesome-webfont.eot?v=4.5.0);
}
5
K. Shaikh

この問題を解決するには、index.htmlのタグの間に@ fontfaceルールを直接追加します。 @ fontfaceルールの上部にあるfont-displayを設定してみることもできます。

font-display: fallback;
font-family: 'Montserrat';
src: local('Montserrat'), url('https://fonts.googleapis.com  /css?family=Montserrat:300,700') format('woff2');
font-style: normal;
font-weight: 700;
1
Rafał Bochniewicz

この問題は、ウェブサイトのheadタグの間にfont-awesomeのオンラインJSライブラリを追加することで解決できます。

https://fontawesome.com/how-to-use/with-the-api/setup/configuration#configuration

<html>
    <head>
        <script>
            FontAwesomeConfig = {searchPseudoElements: true}
        </script>
        <script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
   </head>
   <body></body>
</html>
1
Sagar Pansuriya