DEV Community


Fastest Google Fonts | Notes

abhiweb profile image Kumar Abhishek Originally published at 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="" crossorigin />

<link rel="preload" as="style" href=";700&display=swap" />

<link rel="stylesheet" href=";700&display=swap" media="print" onload="'all'" />

  <link rel="stylesheet" href=";700&display=swap" />
Enter fullscreen mode Exit fullscreen mode

Read on

Discussion (0)

Editor guide