<!--
- 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] --><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin/><!-- [2] --><linkrel="preload"as="style"href="$CSS&display=swap"/><!-- [3] --><linkrel="stylesheet"href="$CSS&display=swap"media="print"onload="this.media='all'"/><!-- [4] --><noscript><linkrel="stylesheet"href="$CSS&display=swap"/></noscript>```
Half of this is applicable to self-hosted fonts, too.
I'm a web developer and founder of Spyrath Dev. A graduate from RGU, I've worked on many web projects from custom designed WordPress to full-stack Node.js web apps.
I don't see any mention yet of Harry Roberts' excellent post on speeding up Google Fonts: csswizardry.com/2020/05/the-fastes...
This is the TLDR;
It's a great article. I've been using this too.