Direct Links
- 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.
- Set
- 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>