web-dev-qa-db-ja.com

ウェブフォントの読み込み中にテキストが表示されたままになるように修正する方法

こんにちは、私はgoogle pagespeedでこの問題に直面しています。サイトの速度がほぼ100になります。残っているのはEnsure text remains visible during webfont load

私はすでにfont-display：swapを使用しています。なぜこれが私の問題を解決しないのですか？.

これが私の外部フォントCSSです

@font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 400;
      src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdTh798HsHwubBAqfkcBTL_fZ5P7.ttf) format('truetype');
    }
    @font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 700;
      src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdT-798HsHwubBAqfkcBTL_X3LbrQsq_.ttf) format('truetype');
    }

このコマンドを使用してこのCSSを生成しました

npx local-webfont https://fonts.googleapis.com/css?family=Miriam+Libre:400,7 /Users/admin/Documents/projects/font.css fallback

私は https://github.com/swissspidy/local-webfont から取得しました

csswebfontsgoogle-pagespeedgoogle-fonts
5
leo Spacer

メインのCSSファイルを確認してください、CSSコード@ font-faceはありますか？そうでない場合は、上記のコードをメインのCSSまたはHTMLページに使用されているその他のCSSに追加します。 HTMLページにコードを追加する必要はありません。

あなたのコードは正しいですが、それがhtmlページにインストールされていてもcssファイルにコードがまだない場合は問題を解決しませんfont-display：swap;

CSSで編集して、HTMLページでスキップしてください

1
Hans Ganteng