web-dev-qa-db-ja.com

<link>を使用してGoogle Fontを非同期に読み込むか、Font Face Observerなしで遅延します

ウェブサイトにGoogleフォント「Noto Serif」を使用したいのですが。私の問題は、Google PageSpeed Insightsでテストすると、1つのことを除いて完璧だということです。

<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">

ページには1つのブロッキングCSSリソースがあります。これにより、ページのレンダリングが遅れます。ページ上のスクロールせずに見えるコンテンツは、次のリソースの読み込みを待たずにレンダリングできませんでした。ブロッキングリソースを遅延または非同期にロードするか、それらのリソースの重要な部分をHTMLで直接インライン化してください。

私はこれに対する悪い解決策を知っています。 HTMLファイルの下部にある<script>を使用してフォントをリンクします。その解決策の問題は、私のウェブサイトで何かをクリックするたびに、スタイルなしテキストのフラッシュが発生することです。

GitHub Pagesでホストされているjekyllを使用しているため、Font Face Observerをインストールできないと思います:(

cssasynchronousfontsjekyllgoogle-font-api
24
Stuffed Marshmallow

ここで、これをheadタグではなくbodyタグに含めます

<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>
4
Paddy

このスクリプトを使用して、Webフォントを非同期にロードできます。

<script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);
</script>

このライブラリ が必要です。実装はとても簡単です。これは、最近受講したResponsive Web Design Fundamentalsのコースから学びました。興味がある場合は、 here をご覧ください。

23
Mirza Sisic

ブロックタグのみを追加

 https://fonts.googleapis.com/css?family=Noto+Serif&display=block

参照： フォントの制御

0
Brayan Cruz