Preloading Fonts

Preloading fonts is a technique used to load fonts before they’re required, which can improve your website’s performance. However, it’s essential to preload only critical fonts and subsets to avoid unnecessarily increasing initial load times.

Note: You can learn more about the preload link relation type in the MDN Web Docs.

To preload a font, you can use the preload link relation type in the <head> of your HTML document. However, due to bundler constraints, you must manually import the URL to your font file. This is typically challenging since bundlers like Vite rewrite URLs to hashed filenames.

Instead, you can use the Vite static asset directive ?url to import the font file URL. For instance, the following code highlights how to preload the Open Sans font:

⬤⬤

import '@fontsource-variable/open-sans';
import openSansWoff2 from '@fontsource-variable/open-sans/files/open-sans-latin-wght-normal.woff2?url';

const App = () => {
  return (
    <html lang="en">
      <head>
        <link rel="preload" as="font" type="font/woff2" href={openSansWoff2} crossorigin="anonymous" />
      </head>
    </html>
  );
};

jsx

Note: Avoid preloading all font files in your project, as this may lead to increased initial load times. Only preload critical fonts and subsets that are essential for the initial page display, such as the latin subset only.

Additionally, preloading can have negative effects on Core Web Vitals if not used correctly. See the Web Vitals article for more information.