Inline @font-face and preload

If you are inlining your font-face declarations, you could combine it with link rel="preload" to avoid waiting for render-blocking resources. The browser will begin downloading the resource as soon as it encounters the link rel="preload".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac orci dictum, dictum augue nec, semper sapien. Etiam efficitur a nisl sed semper. Nam et venenatis risus, eget consequat odio. Praesent at purus ligula. Pellentesque tincidunt lorem at augue mattis blandit. Cras at ipsum augue. Duis vestibulum, ex eu commodo tristique, sem dui cursus lorem, quis sollicitudin leo sem et dui. Integer nec pellentesque nisi. Aliquam fringilla quam neque, eget volutpat nisi pharetra ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

View Source Code

<link rel="preload" as="font" href="../DancingScript-Regular.woff2?v=1676325285146" crossorigin>
<style>
  @font-face {
    font-family: "Dancing Script";
    src: url("/DancingScript-Regular.woff2?v=1676325285146");
  }

  .fancy {
    font-family: "Dancing Script";
  }
</style>
<link rel="stylesheet" href="../style.css">

Learn Performance - Fonts

Inline @font-face and preload