Faster loading googlefonts

Sometimes when you use googlefonts, the external/CDN could be the bottleneck (especially if you live in a country where the hop to next country is slow, like in Indonesia). This article give a good tips how to load your page faster. Just replace the $CSS on this snippet to your googlefont's CSS:

<!-- Preemptively warm up the fonts’ origin -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- Initiate a high-priority, asynchronous fetch for the CSS file. Works in
     most modern browsers -->
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<!--  Initiate a low-priority, asynchronous fetch that gets applied to the page
      only after it’s arrived. Works in all browsers with JavaScript enabled. -->
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

<!-- In the unlikely event that a visitor has intentionally disabled
     JavaScript, fall back to the original method. The good news is that,
     although this is a render-blocking request, it can still make use of the
     preconnect which makes it marginally faster than the default. -->
<noscript>
  <link rel="stylesheet"
        href="$CSS&display=swap" />
</noscript>