Skip to content

Instantly share code, notes, and snippets.

@web-crab
Created May 30, 2020 20:43
Show Gist options
  • Save web-crab/9c1c0de6b5410badd8ab3eed75858ca6 to your computer and use it in GitHub Desktop.
Save web-crab/9c1c0de6b5410badd8ab3eed75858ca6 to your computer and use it in GitHub Desktop.
<!--
https://csswizardry.com/2020/05/the-fastest-google-fonts/
- 1. Preemptively warm up the fonts’ origin.
-
- 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
- most modern browsers.
-
- 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
- only after it’s arrived. Works in all browsers with JavaScript enabled.
-
- 4. 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.
-->
<!-- [1] -->
<link rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />
<!-- [2] -->
<link rel="preload"
as="style"
href="$CSS&display=swap" />
<!-- [3] -->
<link rel="stylesheet"
href="$CSS&display=swap"
media="print" onload="this.media='all'" />
<!-- [4] -->
<noscript>
<link rel="stylesheet"
href="$CSS&display=swap" />
</noscript>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment