Fastest Google Fonts

1 min read
  • Preconnect to Google Font server.
  • Use preload to asynchronously load the font fast on supported browsers.
  • In the link to the main font stylesheet:
    • Set media=print on the stylesheet to stop loading it during page load.
    • On page load, set media=all on stylesheet (using Javascript) to load the font.
  • As a fallback for browsers where Javascript is disabled, include a normal link to the stylesheet within <noscript> tag.

Here is a recommended snippet:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="preload"
as="style"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />

<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
media="print"
onload="this.media='all'" />

<noscript>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />

</noscript>
All Notes Suggest Edit