ウェブサイトに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をインストールできないと思います:(
ここで、これをheadタグではなくbodyタグに含めます
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>
このスクリプトを使用して、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 をご覧ください。