Q: Load Google Font with  asynchronously or deferred without Font Face Observer I want to use the Google Font "Noto Serif" for my website.
My problem is that when I am testing it with Google PageSpeed Insights, it says everything is perfect except for one thing:
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">

Your page has 1 blocking CSS resources. This causes a delay in
rendering your page. None of the above-the-fold content on your page
could be rendered without waiting for the following resources to load.
Try to defer or asynchronously load blocking resources, or inline the
critical portions of those resources directly in the HTML.

I am aware of a bad solution for this.  It's to link the font using <script> at the bottom of the HTML file.  The problem with that solution is it causes a Flash of Unstyled Text every time you click on something in my website.
I am using jekyll hosted with GitHub Pages, so I don't think I can install Font Face Observer :(

A: Add two attributes to your code. One is rel="preload" and the other is as="style". The final code would look like the below:
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" rel="preload" as="style">


A: You can load the 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'll need this library, it's pretty easy to implement. I've learn this from a course I took recently, Responsive Web Design Fundamentals, if you're interested you can check it out here. 

A: Based on this strategy to preload stylesheets:
<link rel="preload" 
      href="https://fonts..."
      as="style"
      onload="this.onload=null; this.rel='stylesheet'; document.body.classList.add('fontLoaded')">

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body.fontLoaded {
  font-family: 'GOOGLE FONT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


A: Very simple approach:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Just replace styles.css with your font URL. It loads the font, and then once it finishes (onload) it "enables" it by switching the rel property to stylesheet.
More details here.

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

Ref : Controlling Font

A: Has any one tried this solution?
<!-- other <head> stuff -->

<!-- connect to domain of font files -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- optionally increase loading priority -->
<link rel="preload" as="style" href="(font CSS URL here)">

<!-- async CSS -->
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="(font CSS URL here)">

<!-- no-JS fallback -->
<noscript>
    <link rel="stylesheet" href="(font CSS URL here)">
</noscript>

</head>


A: Here ya go, include this in the body tag and not the head tag

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


Updated 2020
 <link rel="preload" as="style" href="https://yourcss.css" onload="this.rel='stylesheet'" />

