Async Font Loading Can Speed Up Render Times by ~20%
When you rely on Google Fonts' default &display=swap parameter, you are already telling the browser you are fine with FOUT — rendering text immediately in a fallback face, then swapping in the webfont when it finishes downloading. That implicit asynchronicity, as Harry Roberts points out, is a cue to go further and load the whole font request chain asynchronously as well.
If you’re going to use
font-displayfor your Google Fonts then it makes sense to asynchronously load the whole request chain.
Roberts’ recommended approach centers on splitting the Google Fonts URL. The main stylesheet URL — the $CSS variable — is fetched asynchronously rather than through a blocking stylesheet link. This keeps text rendering untouched, while the font retrieval happens off the critical path.
His tests show roughly a 20% render time savings, with no change in how the page looks or feels during loading. In other words, you get the same visible behavior — just faster.
