Docs / Font / Preload Fonts

Preload Fonts

Preloading fonts tell the browser to load the fonts immediately, at high priority.

If the font URL is mentioned only in a CSS file or it's critical for the above-fold content, it's better to preload them.

Preloading a font will look like this:

<link
  rel="preload"
  href="https://example.com/icons.woff"
  as="font"
  type="font/woff"
  crossorigin
/>

Note that the URL to preload should be a font file ending with eot, otf, ttf, woff, woff2. It shouldn't be the URL to Google Font stylesheet or any other stylesheet.

Finding Fonts to Preload

The easiest way to find the font URLs to preload is to analyze your site using Google PageSpeed Insights.

It will give you the list of font URLs to preload under "Preload Key Requests".

You can right-click on each one, select "Copy Link Address" and add it to Fonts -> Preload Fonts