DEV Community

loading...

Fastest Google Fonts | Notes

abhiweb profile image Kumar Abhishek Originally published at abhi.page on ・1 min read

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 Javscript) 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>
Enter fullscreen mode Exit fullscreen mode

Read on abhi.page

Discussion (0)

pic
Editor guide