All geek questions in one place

Download Google Font using <link> asynchronously or delayed without a Font Face Observer

I want to use the Google font "Noto Serif" for my site. My problem is that when I test it with Google PageSpeed ​​Insights, it tells me that I am perfect, except for one thing:

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

Your page has 1 CSS resource lock. This causes a delay in the rendering of your page. None of the above content on your page can be rendered without waiting for the following resources to load. Try deferring or loading blocking resources asynchronously or inserting critical parts of these resources directly into HTML.

I know a bad solution for this. To link the font using <script> at the bottom of the HTML file. The problem with this solution is that every time you click on something on your website, you invoke Flash text with opaque text.

I am using jekyll hosted on GitHub pages, so I don't think I can install the Font Face Observer :(

+27
source share
3 answers

Here ya go, include this in the body tag, not the header tag

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

You can download web fonts asynchronously with this script:

 <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>

You will need this library , it is quite easy to implement. I learned about this from a course I recently studied, "Basics of Responsive Web Design." If you are interested, you can check it out here .

+23
source

Add only block tag

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

Ref: Font Management

0
source

Source: https://habr.com/ru/post/1012361/

More articles:


All Articles